Flexbox to fill available space not working inside React.js component

Question

I am trying to set up a simple flexbox layout with content that expands between header and footer, based on this example. It works fine when I put the appropriate HTML directly in the page template, but fails when I render the exact same HTML inside a React component.

Here is the plain HTML:

<div class="box">
  <div class="header">
    <p><b>header</b></p>
  </div>
  <div class="content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

My style.css is this in all cases:

html, body {
  height: 100%;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.header {
  flex: 0 1 auto;
}

.content {
  flex: 1 1 auto;
}

.footer {
  flex: 0 1 40px;
}

That works great when served as static HTML. I should get the same thing if I serve just an empty page with a single root div and render the same thing with React using this HTML:

<div id="root">
</div>

and this JS:

class Boxes extends React.Component {

  render() {
    return (
      <div className="box">
        <div className="header">
          <p><b>header</b></p>
        </div>
        <div className="content">
          <p>
            <b>content</b>
            (fills remaining space)
          </p>
        </div>
        <div className="footer">
          <p><b>footer</b> (fixed height)</p>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  React.createElement(Boxes, null),
  document.getElementById('root')
);

But the center "content" pane no longer fills the available vertical space when I render with React. Instead it just sizes to the content.

This is with React 15.4.2 on Chrome/Mac.

I tested your code, isn't this working as you expected? https://codesandbox.io/s/wmRnm5Y31 — Gonzalo Faus, Jun 10 '17 at 00:15
It is broken as expected. The content should fill all remaining vertical space. — Jonathan Stray, Jun 10 '17 at 00:26
Ah, found it! Need to set height to 100% on the outer root element. In this case index.html should be `
` — Jonathan Stray, Jun 10 '17 at 00:28
yes, that was it, the #root style was missing, updated the example: https://codesandbox.io/s/wmRnm5Y31 — Gonzalo Faus, Jun 10 '17 at 00:31

score 7 · Accepted Answer · answered Jun 10 '17 at 00:28

7

The problem is you have a wrapper <div id="root"> which doesn't have any css. You should make root expand to the full height, and then the divs inside will expand as well:

#root {
  height: 100%;
}

answered Jun 10 '17 at 00:28

Austin Greco

32,997
6
55
59

Yup, that is the problem! – Jonathan Stray Jun 10 '17 at 00:29
So if the flexbox is deeply nested, do all parent divs also need to have height 100%? That might be tricky to achieve. – Jonathan Stray Jun 10 '17 at 00:35
3

You can always use 'height: 100vh' if you need it – Gonzalo Faus Jun 10 '17 at 00:50
Yes, but vh won't work if trying to fill the vertical space inside another div, like below a navbar. – Jonathan Stray Jun 10 '17 at 01:02
Yeah there's no great way to do it.. there are some tricks like `100vh` or `calc(100vh - 50px)` removing topbar height..or overusing `display: flex`.. I tend to use a combination of `flex` and `height` / `min-height: 100%` – Austin Greco Jun 10 '17 at 01:08
height: 100vh worked for me but height: 100% did not on #root . If anyone can explain why this accepted solution is not working in all cases? – Thibault Fouquaert Feb 21 '19 at 09:45

score 3 · Answer 2 · answered Feb 07 '18 at 17:56

3

You can try : { height : 100vh}

answered Feb 07 '18 at 17:56

Klaudia Brysiewicz

119
4

Flexbox to fill available space not working inside React.js component

2 Answers2