Как бы вы обратились к этим вложенным Flexbox с помощью align-items: stretch?

Question

Это действительно сложно выразить словами, поэтому я сделал эту быструю диаграмму:

Внешний родительский элемент является гибким с align-items:stretch, так что col 1 и col 2 имеют одинаковую высоту. В моем случае это потому, что у меня есть какое-то изображение границы или фона, которое будет выглядеть лучше при увеличении длины. Однако ... как вы можете видеть, я хочу применить те же правила к столбцам внутри этих двух столбцов. В моем случае у меня есть виджет объявлений в одном и новостная лента в другом. Поэтому я не могу по-настоящему объединить эти два, чтобы просто сделать один комбинированный канал. Они извлекают данные из разных источников и работают независимо с разными отметками времени и правилами, поэтому ... они действительно должны быть отдельными компонентами, но поскольку они вложены по отдельности, они не одинаково "заполняют" внешние столбцы. Когда объявления в столбце 1 слишком малы, я получаю мертвое / негуское пространство без рамки, текстуры фона или чего-либо еще, простирающегося вниз.

Способ, которым я решил эту проблему в прошлом, заключается в использовании JS для просмотра столбцов, которые длиннее, и соответствия высоты по мере необходимости. Но это кажется действительно анти-flexbox. Такое ощущение, что одна из основных причин существования flexbox заключается в том, чтобы позволить больше функциональности макета без необходимости использования JS, и хотя это незначительная вещь с точки зрения функциональности, где я мог бы оставить это и просто сказать, что это то, что есть ... Мне интересно, есть ли некоторая скрытая магия во flexbox, которая позволила бы мне сказать, растягивается ли родительский> родитель, чем, по крайней мере, соответствовать этому.

Answer 1

Это то, что вы ищете?

HTML:

<div class="outerContainer">

  <div class="innerContainer">

    <div class="col">
      <h2>Column 1</h2>
      <p>some stuff</p>
      <p>some stuff</p>
      <p>some stuff</p>
      <p>some stuff</p>
      <p>some stuff</p>
    </div>

    <div class="col">
      <h2>Column 2</h2>
      <p>some stuff</p>
      <p>some stuff</p>
      <p>some stuff</p>
      <p>some stuff</p>
      <p>some stuff</p>
    </div>
  </div>

  <div class="innerContainer">

    <div class="col">
      <h2>Column 3</h2>
      <p>some stuff</p>
      <p>some stuff</p>
    </div>

    <div class="col">
      <h2>Column 4</h2>
      <p>some stuff</p>
      <p>some stuff</p>
    </div>

  </div>

</div>

CSS:

.outerContainer {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}

.innerContainer {
  display: flex;
  align-items: stretch;
  border: 1px solid red;
}

.col {
  padding: 16px;
  background-color: pink;
  border: 1px solid black;
}

https://codepen.io/McHat/pen/QzZExp