How to make React Flexbox stretch to full screen height

Question

I'm trying to create a React app that is optimized for mobile and am doing most of the layout using flexbox. I'm having trouble forcing the main container of my app to automatically expand to the full device height.

What rules can I apply, specifically to my html container <div id="react-app"></div> and my main app container <App></App> so that they will always stretch to the full screen height, even when their children wouldn't force them to do so?

Answer 1

You can use

height:100vh

for your App component, but it can looks not perfect on iOS Safari. Also you can set

        html, body, #reactapp, .App {
          height: 100%;
        }
       .App {
         display: flex;
        }