Layout do Flexbox com dois filhos de altura igual, um contendo flexbox aninhado com rolagem de conteúdo

eu tenho um<img> com um painel à direita contendo um cabeçalho de controles e uma longa lista de itens. Então, eu tenho uma situação aninhada de flexbox:

.container (flex)
 -> .child img
 -> .child controls panel (flex)
  -> .controls
  -> .content-wrapper scrolling list

Em um nível muito básico, os dois painéis lado a lado são fáceis, sendo um flex simples comalign-items: stretch ..https://codepen.io/neekfenwick/pen/MOxYxz

Nesse nível básico, é uma pergunta duplicada paraComo mantenho dois divs lado a lado na mesma altura?.

Depois que o painel à direita se torna mais complexo com uma lista de rolagem vertical, não consigo ver como aumentar a altura do pai, o segundo.child, corresponda à altura do primeiro.child. https://codepen.io/neekfenwick/pen/XzGJGw

+-------------+---------------+
|             |  Controls     |
| Left child  |               |
|             +---------------+
|             |              A|
|             | Vertically   |+
|             | scrolling    ||
|             | items        ||
|             |              |+
|             |              V|
+-------------+---------------+

eu liItem Flexbox com conteúdo rolável mas isso resolve um problema de rolagem horizontal, não um layout vertical como este. Além dissoFlexbox aninhado com área de rolagem lida com caixas flexíveis aninhadas verticalmente empilhadas, acho que essa combinação derow ecolumn direções confunde minha situação.

Como um trecho de código:

.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;
}

<div class="container">
  <div class="child">
    <p>In real life I am an inline img.</p>
    <p>I am some content whoop de doo.</p>
    <p>I am some content whoop de doo.</p>
    <p>I am some content whoop de doo.</p>
    <p>I want my sibling to equal my height.</p>
  </div>
  <div class="child controls-panel">
    <div class="controls">
      <p>Small controls area. Panel below should scroll vertically.</p>
    </div>
    <div class="content-wrapper">
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
      <div class="content-item"></div>
    </div>
  </div>
</div>

Não quero fixar a altura de nenhum elemento aqui. Por acaso, eu sei a altura do img e, portanto, poderia usar o CSS para forçar a altura dos elementos à direita, mas me perguntei se existe uma maneira 'verdadeira' de flexbox para resolver esse problema.