css - 等高嵌套 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 文件中，并在 Chrome 或 Safari 中打开它，右侧的两列会拉伸(stretch)到视口(viewport)高度。但是，文件和 JSFiddle/CodePen 链接在 Firefox 中都可以正常工作。

所以我的问题是:

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

Answer 1

这是怎么回事？

您的 .flex-col 不是 flex-container，它只是一个 flex-item。然后在 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>