title: Height issue with elements in a row using flexbox and scrolling
body: <p>I have a couple of element which are positioned horizontally, but they are taller than the parent, meeaning they scroll. It looks like this
  <a href="https://i.stack.imgur.com/3rlHa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3rlHa.png" alt="enter image description here"></a></p>
  
  <p>Although the scroll behaviour is correct, the content of the first block overflows. </p>
  
  <p>The HTML looks like this</p>
  
  <pre><code>&lt;section&gt;
      &lt;div&gt; &lt;!-- very long content --&gt; &lt;/div&gt;
      &lt;div&gt;b&lt;/div&gt;
      ....
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>section {
      display: flex;
      border: 2px solid red;
      height: 100px;
      align-items: stretch;
      overflow:auto;
  }
  
  div {
      background-color: green;
      margin: 5px;
      flex: 1;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/3ch19qjq/2/" rel="nofollow noreferrer">DEMO</a></p>
  
  <p>As you can see in the demo, the element with the green background color is not tall enough to fit all the content. How can this be achieved ? It would be nice if all <strong>div</strong>s have the same height, is that possible?</p>