Html 如何使用align items:stretch来处理这些嵌套的FlexBox？

这真的很难用语言表达，所以我制作了一个快速图表：

外部父级是灵活的，带有

对齐项目：拉伸

，以便第1列和第2列的高度相同。在我的例子中，这是因为我有一些边框或背景图像，如果延长相同的长度，看起来会更好。然而。。。如您所见，我希望对这两列中的列应用相同的规则。在我的例子中，一个是公告小部件，另一个是新闻提要。所以我不能把两者结合起来，只做一个组合饲料。它们来自不同的来源，并以不同的时间戳和规则独立运作，因此。。。它们确实需要是单独的组件，但因为它们是单独嵌套的，所以它们不能同时“填充”外部列。当第1列中的公告太小时，我会得到死角/负角空间，没有边框或背景纹理或任何向下延伸的东西

---

我过去解决这个问题的方法是使用JS来观察哪些列更长，并根据需要匹配高度。但这似乎真的反flexbox。感觉flexbox存在的一个主要原因是在不需要JS的情况下允许更多的布局功能，尽管从功能的角度来看这是一件小事，我可以离开它，只说它是什么。。。我想知道flexbox中是否有一些隐藏的魔法，可以让我说，如果父项>父项正在拉伸，那么至少可以匹配它。

这就是你要找的吗

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>

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