html - 当 flex-direction 为 'column' 时，CSS flex-basis 不起作用

Question

我的目标是使用 flexbox 创建一个双列布局，其中第一列有两行，第二列有一行，如下所示:

在第三项上设置 flex-basis: 100% 可以达到预期的效果，但前提是容器的 flex-direction 是 row :

将 flex-direction 更改为 column 会导致以下结果，除非明确设置了 height，这在我的元素中是不可行的:

如何在不显式设置容器的高度的情况下获取第一张图片？

Here's a Plunker illustrating the problem .

body {
  display: flex;
  height: 100px;
  width: 100px;
}
.container {
  display: flex;
  flex-direction: column; /* Setting this to `row` gives the expected effect,but rotated */
  flex-grow: 1;
  flex-wrap: wrap;
  /* height: 100%; */ /* Setting this fixes the problem, but is infeasible for my project*/
}
.item {
  flex-grow: 1;
}
.one {
  background-color: red;
}
.two {
  background-color: blue;
}
.three {
  background-color: green;
  flex-basis: 100%;
}

<div class="container">
  <div class="item one">&nbsp;</div>
  <div class="item two">&nbsp;</div>
  <div class="item three">&nbsp;</div>
</div>

Answer 1

为什么不起作用:

只有当 flex 元素的初始主要尺寸溢出 flex 容器时，才会发生 flex 换行。在 flex-direction: row 的情况下，这是当它们的 flex 元素比容器宽时。使用 flex-direction: column，它们必须溢出容器的高度。

但是在 CSS 中，高度的行为与宽度有着根本的不同。 CSS 中容器的高度由其子元素的高度决定。因此，如果没有东西限制容器的高度，它们的 flex 元素将永远不会溢出；他们只是让他们的容器更高。如果它们没有溢出，它们就不会换行。

可能的解决方案:

你必须限制容器的高度。明显的方法(你说的不在讨论范围内)是设置一个显式的 height 或 max-height。

问问自己为什么需要限制高度。是否留在视口(viewport)内？你可以使用 viewport-relative单位并设置类似 max-height: 100vh 的内容。它是否等于此 flex 容器外另一列的高度？你可以用另一个 flexbox 来约束它。使这个 flex 容器成为外部 flexbox 中的 flex 元素。不过，外部 flexbox 中的其他东西必须确定其高度。