хотя 2-й имеет лучшую поддержку браузеров, так как могут быть более старые браузеры, все еще поддерживают Flexbox, который может не работать.

я есть<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 для решения этой проблемы.

 LGSon06 дек. 2017 г., 21:13
Что я могу сделать, чтобы мой ответ был приемлемым?
 Neek07 дек. 2017 г., 07:31
Я действительно извиняюсь за задержку. Ваш ответ был превосходным, я был просто завален другими частями проекта прямо сейчас. Я прочитал его, когда вы его опубликовали, но вы использовали трюки, которых я раньше не видел, и мне нужно было время для экспериментов. Я прокомментирую ответ.
 LGSon07 дек. 2017 г., 07:33
Нет проблем :) ... просто следил за моими ответами

Ответы на вопрос(1)

Решение Вопроса

overflow: scroll (или жеauto а такжеhidden), чтобы работать, ограничение высоты необходимо тем или иным образом, иначе элементы обычно растут настолько, насколько это необходимо для их содержимого.

Существует в основном 3 способа, где либо указывается фактическая высота, как в этом первом примере, где я добавил ее кcontainer.

Фрагмент стека 1

.container {
  display: flex;
  height: 100vh;
}

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

Или использовать абсолютное позиционирование, чтобы создать этоограничение по высоте, что делает абсолютный элемент.

Это просто достигается с помощью дополнительной обертки,content-scrollи оставит остальную часть структуры полностью динамичной.

Фрагмент стека 2

.container {
  display: flex;
}

.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 {
  position: relative;
  flex: 1 1 auto;
  width: 400px;
}
.content-scroll {
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  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-scroll">
        <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>
</div>

Используйте только Flexbox, подумав, что он может не работать полностью в разных браузерах, особенно с более старыми версиями, которые по-прежнему поддерживают его, но сильно ошибаются

Простое исправление в вашем исходном коде - изменитьflex: 1 1 auto; в.content-wrapper вflex: 1 1 0px; (0px были необходимы для моей версии IE, для Chrome / Firefox / Edge можно использовать0)

Фрагмент стека 3

.container {
  display: flex;
}

.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 0px;
  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>
  </div>
</div>

Фрагменты 2 и 3 также отвечают на ваш вопрос

... с вертикально прокручивающимся списком, я не вижу, как сделать высоту его родителя, второй.child, соответствовать высоте первого.child.

Обратите внимание, что если верхний элемент в правом столбце может вырасти больше, чем левый столбец, для нижнего элемента потребуется минимальная высота, чтобы предотвратить его сворачивание в 0, например,

.content-wrapper {
  ...
  min-height: 200px;           /*  e.g. like this  */
}
 Neek07 дек. 2017 г., 09:38
Отличный ответ. Я протестировал Snippet 2 и обнаружил, что он работает, однако используяposition: absolute кажется неудобным хаком. Snippet 3 кажется более чистым подходом. Я не понялаflex-basis до.developer.mozilla.org/en-US/docs/Web/CSS/flex-basis гласит: «Свойство flex-based CSS задает начальный основной размер элемента flex. Это свойство определяет размер поля содержимого, если не указано иное при использовании определения размера блока.», правильно ли яflex-basis: 0px устанавливает начальную высоту в ноль, а затем поле расширяется, чтобы соответствовать его брату? Отлично!
 LGSon10 дек. 2017 г., 17:42
@ Да, да,flex-basis: 0 (или на IEflex-basis: 0px) означает просто, что он обрабатывается так, как если бы он был пустым, следовательно, егоflex-grow: 1 заполнит оставшееся пространство. 3-й фрагменточистительхотя 2-й имеет лучшую поддержку браузеров, так как могут быть более старые браузеры, все еще поддерживают Flexbox, который может не работать.

Ваш ответ на вопрос