html - how to make <main> 100% height in material ui drawer demo

Question

I have a Material UI drawer question. For my project I want to the the backround color of the main tag but the problem is that the main tag is only as tall as the content inside.

https://codesandbox.io/s/material-demo-forked-djfll?file=/demo.js

I can set the height to '100vh' which makes it the full screen size, but with that if I enter more data it doesnt fill the whole screen

width: '100%' Few Content https://i.stack.imgur.com/D2l1A.png Much Content https://i.stack.imgur.com/avtXE.png

width: '100vh' Few Content https://i.stack.imgur.com/MNZYK.png Much Content https://i.stack.imgur.com/YEs7L.png

Answer 1

Add this to your HTML file:

    html,
    body {
      min-height: 100vh;
      display: flex;
      flex: 1;
    }
    #root {
      display: flex;
      flex: 1;
    }

Codesandbox

Then add flex: 1 to your root on line 25 of demo.js

In short: your body needs to be 100vh, then you can flex whatever you need to.