title: css how to make columns auto fill background color to height 100%
body: <p>I have the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#left {
    float: left;
    width: 180px;
    background-color: #ff0000;
  }
  
  #right {
    overflow: hidden;
    background-color: #00FF00;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;div id="left"&gt;
      left
    &lt;/div&gt;
    &lt;div id="right"&gt;
      right&lt;br/&gt; down
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I am trying to achieve is to make the left column's <code>background-color</code> to fill the whole <code>div</code>. This should be the case regardless of the height of the <code>#right</code> column.</p>
  
  <p>so far I have tried/added  </p>
  
  <pre><code>display: flex;
  height: 100%
  flex 1;
  </code></pre>
  
  <p>To the <code>#left</code> style but it is not working.</p>
  
  <p>This has to be a CSS only solution.</p>