я есть<img> с панелью справа, содержащей заголовок элемента управления и длинный список элементов. Итак, у меня есть ситуация с вложенным flexbox:

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

На самом базовом уровне две боковые панели легки, будучи простымalign-items: stretch ..https://codepen.io/neekfenwick/pen/MOxYxz

На этом базовом уровне это дублирующий вопросКак мне сохранить два элемента div, расположенных бок о бок, одинаковой высоты?.

Как только панель справа становится более сложной с вертикально прокручивающимся списком, я не могу понять, как сделать высоту своего родителя вторым.child, соответствовать высоте первого.child. https://codepen.io/neekfenwick/pen/XzGJGw

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

я прочиталЭлемент Flexbox с прокручиваемым содержимым но это решает проблему горизонтальной прокрутки, а не вертикальной компоновки, как эта. ТакжеВложенный флексбокс с областью прокрутки имеет дело с вертикально сложенными вложенными флексбоксами, я думаю, что эта комбинацияrow а такжеcolumn направления сбивает с толку мою ситуацию.

Как фрагмент кода:

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

Я не хочу фиксировать высоту каких-либо элементов здесь. Когда это происходит, я знаю высоту img, и поэтому я могу использовать CSS для принудительной установки высоты элементов справа, но мне было интересно, есть ли «истинный» способ flexbox для решения этой проблемы.