CSS 100% height not working in React app

Question

I am trying to use Flexbox in my React app to create a simple two column webpage that occupies the full width and height.

I can get this to work with HTML and CSS on their own but not within a React app.

So far I have:

:root {
  overflow-x: hidden;
  height: 100%;
}

body {
  min-height: 100%
}

.flexbox {
  height: 100%;
  display: flex;
}

.left {
  flex: 0 0 200px;
  height: 100%
}

.right {
  flex: 1
}

and:

<div class="flexbox">
  <div class="left">
    Left
  </div>
  <div class="right">
    Right
  </div>
</div>

I realise that I need to account for the additional <div id="root"></div> tag in my index.html so I have also added the following to my css:

#root {
  height: 100%;
}

And my render function:

render() {
  return (
    <div className="flexbox">
      <div className="left">Left</div>
      <div className="right">Right</div>
    </div>
  )
}

but this doesn't work. The columns exist but are not full height. Why not?

Answer 1

If you use create-react-app, it adds an element with class=App and an element with id=root to the DOM. They should also get height: 100%

html, body, #root, .App {
  height: 100%;
}