CODEWITHSUNDEEP
reactjsflexbox
Patrick Connors
Patrick Connors

Reputation: 6095

How to make React Flexbox stretch to full screen height

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?

Upvotes: 3

Views: 10033

Answers (3)

kas
kas

Reputation: 1035

patelarpan's answer here seems to be the most concise solution:

You can achieve this by using "vh" units, and it's a more effective way than using percentages because you don't need to set every parent height to 100% if you want the child's height to be 100%.

.columnContainer { 
   display: flex; 
   height: calc(100vh - 60px);
}

Here is an example of the 60px app bar height being excluded from the viewport height.

I replaced the height line in patelarpan's example with this, since I don't have an app bar:

height: 100vh;

Upvotes: 0

Dhiraj Das
Dhiraj Das

Reputation: 174

root > [data-reactroot] { height: 100% } in your CSS should work.

Or just the tag itself:

[data-reactroot] { ... }

Upvotes: -3

Alex Borodin
Alex Borodin

Reputation: 2034

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;
        }

Upvotes: 6

Related Questions