Yo tengo un<img> con un panel a su derecha que contiene un encabezado de controles y una larga lista de elementos. Entonces tengo una situación anidada de flexbox:

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

En un nivel muy básico, los dos paneles uno al lado del otro son fáciles, siendo un simple flex conalign-items: stretch ..https://codepen.io/neekfenwick/pen/MOxYxz

En ese nivel básico es una pregunta duplicada para¿Cómo mantengo dos divisiones que están lado a lado a la misma altura?.

Una vez que el panel de la derecha se vuelve más complejo con una lista de desplazamiento vertical, no puedo ver cómo hacer que la altura de su padre, la segunda.child, coincide con la altura del primero.child. https://codepen.io/neekfenwick/pen/XzGJGw

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

he leídoElemento de Flexbox con contenido desplazable pero eso resuelve un problema de desplazamiento horizontal, no un diseño vertical como este. tambiénFlexbox anidado con área de desplazamiento trata de cajas flexibles anidadas apiladas verticalmente, creo que esta combinación derow ycolumn Las direcciones confunden mi situación.

Como fragmento 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>

No quiero arreglar la altura de ningún elemento aquí. Resulta que sé la altura de la img y, por lo tanto, podría usar CSS para forzar la altura de los elementos a la derecha, pero me preguntaba si hay una forma 'verdadera' de flexbox de resolver este problema.