等高嵌套的 flexbox 列

Question

我有一个包含两列的 flexbox 容器，第二列包含另一个包含两列的 flexbox 容器。我希望这两个嵌套列与包含它们的列的高度相同，与另一个外列的高度相同。

基本上，我希望它看起来像三个等高的柱子，它们之间有一个排水沟，就像这样：

我在 JSFiddle 和 CodePen 中通过将内部 flexbox 容器的高度设置为 100% 来完成这项工作。

HTML：

<div>
  <div class="flex-container">
    <div class="flex-col">
      <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tortor metus, ultrices ut egestas eget, lacinia ut tellus. Duis consectetur velit ut aliquam convallis. Donec erat ex, interdum et justo in, varius pharetra nunc. Integer rutrum, ante nec gravida scelerisque, urna massa convallis enim, et tincidunt leo odio eget nisl. Ut et blandit velit, ac tristique massa. Integer leo mi, tincidunt in bibendum eu, blandit eget est. Cras convallis elit id urna convallis euismod.</div>
    </div>
    <div class="flex-col">
      <div class="flex-container list-container">
        <div class="flex-col list">Content</div>
        <div class="flex-col list">Content</div>
      </div>
    </div>
  </div>
</div>

还有 CSS：

.box {
  background-color: blue;
}

.list-container {
  height: 100%;
}

.flex-col.list {
  background-color: lightblue;
}

.flex-container {
  display: flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  margin-left: -1em;
}

.flex-col {
  -webkit-flex: 1;
  flex: 1;
  margin-left: 1em;
}

但奇怪的是：在 Chrome 上，它似乎只适用于这些网站，而在 Safari 中则根本不起作用。如果我在 Safari 中打开 JSFiddle 或 CodePen 链接，右侧的两列显示为 折叠 到它们的内容。同时，如果我将相同的代码粘贴到 HTML 文件中并在 either Chrome 或 Safari 中打开，右侧的两列会显示为 拉伸 到视口高度。但是，该文件和 JSFiddle/CodePen 链接在 Firefox 中都可以正常工作。

所以我的问题是：

1. 这是怎么回事？
2. 在不设置固定高度或牺牲排水沟或嵌套的情况下，实现我想要的外观的最佳方式是什么？

Answer 1

这是怎么回事？

您的.flex-col 不是flex-container，它只是一个弹性项目。然后在flex-item 中使用flex-container，它按预期工作，它填充了自己内容的高度。

---

什么是实现我想要的外观的最佳方式，而不设置 固定高度还是牺牲我的排水沟或我的嵌套？

您还需要将flex-item 设为flex-container。

.box {
  background-color: blue;
}
.flex-col.list {
  background-color: lightblue;
}
.flex-container {
  display: flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  margin-left: -1em;
}
.flex-col {
  -webkit-flex: 1;
  flex: 1;
  margin-left: 1em;
}
.flex-col.flex-container {
  margin-left: 0;
}

<div>
  <div class="flex-container">
    <div class="flex-col">
      <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tortor metus, ultrices ut egestas eget, lacinia ut tellus. Duis consectetur velit ut aliquam convallis. Donec erat ex, interdum et justo in, varius pharetra nunc. Integer rutrum, ante
        nec gravida scelerisque, urna massa convallis enim, et tincidunt leo odio eget nisl. Ut et blandit velit, ac tristique massa. Integer leo mi, tincidunt in bibendum eu, blandit eget est. Cras convallis elit id urna convallis euismod.</div>
    </div>
    <div class="flex-col flex-container">
      <div class="flex-col list">Content</div>
      <div class="flex-col list">Content</div>
    </div>
  </div>
</div>