title: CSS 100% height not working in React app
body: <p>I am trying to use Flexbox in my React app to create a simple two column webpage that occupies the full width and height.</p>
  
  <p>I can get this to work with HTML and CSS on their own but not within a React app.</p>
  
  <p>So far I have:</p>
  
  <pre><code>: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
  }
  </code></pre>
  
  <p>and:</p>
  
  <pre><code>&lt;div class="flexbox"&gt;
    &lt;div class="left"&gt;
      Left
    &lt;/div&gt;
    &lt;div class="right"&gt;
      Right
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I realise that I need to account for the additional <code>&lt;div id="root"&gt;&lt;/div&gt;</code> tag in my <code>index.html</code> so I have also added the following to my css:</p>
  
  <pre><code>#root {
    height: 100%;
  }
  </code></pre>
  
  <p>And my <code>render</code> function: </p>
  
  <pre><code>render() {
    return (
      &lt;div className="flexbox"&gt;
        &lt;div className="left"&gt;Left&lt;/div&gt;
        &lt;div className="right"&gt;Right&lt;/div&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>but this doesn't work. The columns exist but are not full height. Why not?</p>