title: css flexbox: same height for all elements?
body: <p>Using CSS and flexbox, I don't understand how to give the same height to divs "a" and "b". I need b to become taller so as to match a's height. In other words, the grey box should be as tall as the red box.  </p>
  
  <p>It was my understanding that it was enough to set <code>flex:1</code> to both a and b, in order for them to have same height. But it is not so.</p>
  
  <p>I tried to set <code>flex-basis:0</code> to both "a" and "b", but the content is truncated. I cannot truncate a, I need b to be enlarged.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#cont1{
      display:flex;
      flex-direction:column;
  }
  
  #a{
      background-color:red;
      flex:1;
  }
  
  #b{
      background-color:grey;
      flex:1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="cont1"&gt;
      &lt;div id="a"&gt;
          &lt;h1&gt;title&lt;/h1&gt;
          &lt;h1&gt;title&lt;/h1&gt;
          &lt;h1&gt;title&lt;/h1&gt;
          &lt;h1&gt;title&lt;/h1&gt;
          &lt;h1&gt;title&lt;/h1&gt;
          &lt;h1&gt;title&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div id="b"&gt;
          short text
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/wothbd5z/" rel="noreferrer">JSFiddle version</a></p>