title: Flexbox layout with two equal height children, one containing nested flexbox with scrolling content
body: <p>I have an <code>&lt;img&gt;</code> with a panel to its right containing a controls header and a long list of items. So I have a nested flexbox situation:</p>
  
  <pre><code>.container (flex)
   -&gt; .child img
   -&gt; .child controls panel (flex)
    -&gt; .controls
    -&gt; .content-wrapper scrolling list
  </code></pre>
  
  <p>At a very basic level, the two side by side panels are easy, being a simple flex with <code>align-items: stretch</code> .. <a href="https://codepen.io/neekfenwick/pen/MOxYxz" rel="nofollow noreferrer">https://codepen.io/neekfenwick/pen/MOxYxz</a></p>
  
  <p>At that basic level it's a duplicate question to <a href="https://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height">How do I keep two divs that are side by side the same height?</a>.</p>
  
  <p>Once the panel on the right becomes more complex with a vertically scrolling list, I cannot see how to make the height of its parent, the second <code>.child</code>, match the height of the first <code>.child</code>.  <a href="https://codepen.io/neekfenwick/pen/XzGJGw" rel="nofollow noreferrer">https://codepen.io/neekfenwick/pen/XzGJGw</a></p>
  
  <pre><code>+-------------+---------------+
  |             |  Controls     |
  | Left child  |               |
  |             +---------------+
  |             |              A|
  |             | Vertically   |+
  |             | scrolling    ||
  |             | items        ||
  |             |              |+
  |             |              V|
  +-------------+---------------+
  </code></pre>
  
  <p>I have read <a href="https://stackoverflow.com/questions/46892471/flexbox-item-with-scrollable-content">Flexbox item with scrollable content</a> but that solves a horizontal scrolling problem, not a vertical layout like this.  Also <a href="https://stackoverflow.com/questions/29430254/nested-flexbox-with-scrolling-area">Nested flexbox with scrolling area</a> deals with vertically stacked nested flexboxes, I think this combination of <code>row</code> and <code>column</code> directions confuses my situation.</p>
  
  <p>As a code snippet: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: flex;
    align-items: stretch;
  }
  
  .child {
    border: 1px solid grey;
    background-color: lightgrey;
    flex: 1 1 auto;
  }
  
  .controls-panel {
    display: flex;
    flex-direction: column;
  }
  
  .controls {
    flex: 0 0 auto;
  }
  
  .content-wrapper {
    flex: 1 1 auto;
    width: 400px;
    overflow-y: auto;
  }
  .content-item {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="child"&gt;
      &lt;p&gt;In real life I am an inline img.&lt;/p&gt;
      &lt;p&gt;I am some content whoop de doo.&lt;/p&gt;
      &lt;p&gt;I am some content whoop de doo.&lt;/p&gt;
      &lt;p&gt;I am some content whoop de doo.&lt;/p&gt;
      &lt;p&gt;I want my sibling to equal my height.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="child controls-panel"&gt;
      &lt;div class="controls"&gt;
        &lt;p&gt;Small controls area. Panel below should scroll vertically.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="content-wrapper"&gt;
        &lt;div class="content-item"&gt;&lt;/div&gt;
        &lt;div class="content-item"&gt;&lt;/div&gt;
        &lt;div class="content-item"&gt;&lt;/div&gt;
        &lt;div class="content-item"&gt;&lt;/div&gt;
        &lt;div class="content-item"&gt;&lt;/div&gt;
        &lt;div class="content-item"&gt;&lt;/div&gt;
        &lt;div class="content-item"&gt;&lt;/div&gt;
        &lt;div class="content-item"&gt;&lt;/div&gt;
        &lt;div class="content-item"&gt;&lt;/div&gt;
        &lt;div class="content-item"&gt;&lt;/div&gt;
        &lt;div class="content-item"&gt;&lt;/div&gt;
        &lt;div class="content-item"&gt;&lt;/div&gt;
        &lt;div class="content-item"&gt;&lt;/div&gt;
        &lt;div class="content-item"&gt;&lt;/div&gt;
        &lt;div class="content-item"&gt;&lt;/div&gt;
        &lt;div class="content-item"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I do not want to fix the height of any elements here.  As it happens, I know the height of the img, and so I could use CSS to force the height of the elements on the right, but I wondered if there is a 'true' flexbox way of solving this problem.</p>