您如何用align-items：Stretch处理这些嵌套的Flexbox？

Question

这真的很难用语言表达，因此我制作了这张快速图表：

外部父对象是align-items:stretch的flex元素，因此col 1和col 2的高度相同。就我而言，这是因为我有一些边框或背景图像，如果延伸相同的长度看起来会更好。但是...如您所见，我想对这两列中的列应用相同的规则。在我的情况下，我一个中有一个公告小部件，另一个中有一个新闻提要。因此，我无法真正将两者结合起来而仅形成一个联合供稿。它们来自不同的来源，并以不同的时间戳和规则独立运行，所以……它们确实需要是单独的组件，但是由于它们是单独嵌套的，因此它们不能均等地“填充”外部列。当第1栏中的公告太小时，我会得到死/负空间，没有边框或背景纹理，或者一直向下延伸的东西。

我过去解决此问题的方法是使用JS来查看哪些列更长并根据需要匹配高度。但是，这似乎真的是反flexbox。感觉flexbox存在的一个主要原因是允许更多的布局功能而不需要JS，尽管从功能的角度来看这是次要的事情，我可以保留它，而只是说它是什么...我只是想知道是否存在flexbox中有一些隐藏的魔术，它可以让我说出parent> parent在伸展，至少要匹配它。

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