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.

Answer 1

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