我怎样才能让 Flexbox 孩子 100% 的高度是他们的父母？

Question

我正在尝试填充 Flexbox 中弹性项目的垂直空间。

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

这是JSFiddle

flex-2-child 不会填充所需的高度，除非以下两种情况：

1. flex-2 的高度为 100%（这很奇怪，因为弹性项目默认为 100% + 它在 Chrome 中是错误的）
2. flex-2-child 有一个绝对位置，这也很不方便

目前这在 Chrome 或 Firefox 中不起作用。

Answer 1

使用align-items: stretch

与 David Storey 的回答类似，我的解决方法是：

.flex-2 {
    display: flex;
    align-items: stretch;
}

请注意，height: 100% 应从子组件中删除（请参阅 cmets）。

除了align-items，您还可以在要拉伸的.flex-2-child 项目上使用align-self。

Answer 2

我已经回答了类似的问题here。

我知道你已经说过position: absolute; 不方便，但它确实有效。有关修复调整大小问题的更多信息，请参见下文。

也可以查看jsFiddle 的演示，虽然我只添加了 WebKit 前缀，所以在 Chrome 中打开。

您基本上有两个问题，我将分别处理。

1. 让弹性项目的子项填充高度 100%

• 在孩子的父母上设置position: relative;。
• 在孩子身上设置position: absolute;。
• 然后您可以根据需要设置宽度/高度（在我的示例中为 100%）。

1. 修复 Chrome 中调整大小滚动的“怪癖”

• 将overflow-y: auto; 放在可滚动的 div 上。
• 可滚动的 div 必须明确指定高度。我的样本已经有 100% 的高度，但如果没有应用，您可以指定 height: 0;

有关滚动问题的更多信息，请参阅this answer。

Answer 3

如果我理解正确，你想让 flex-2-child 填充其父级的高度和宽度，使红色区域完全被绿色覆盖？

如果是这样，你只需要设置 flex-2 来使用 Flexbox：

.flex-2 {
    display: flex;
}

然后告诉 flex-2-child 变得灵活：

.flex-2-child {
    flex: 1;
}

见http://jsfiddle.net/2ZDuE/10/

原因是 flex-2-child 不是 Flexbox item，但它的 parent 是。

Answer 4

我认为 Chrome 的行为更符合 CSS 规范（尽管它不太直观）。根据 Flexbox 规范，默认的 stretch 值为元素的“交叉尺寸属性”（height，在本例中）的 align-self 属性 changes only the used value。而且，据我了解the CSS 2.1 specification，百分比高度是根据父级height 的指定 值计算的，而不是其使用值。父级的height 的指定值不受任何弹性属性的影响，仍然是auto。

设置显式的height: 100% 可以正式地计算孩子的高度百分比，就像将height: 100% 设置为html 可以计算@987654333 的百分比高度一样@ 在 CSS 2.1 中。

Answer 5

我自己找到了解决方案。假设您有以下 CSS：

.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%; <- didn't work
}

这种情况下，设置高度100%是不行的，所以我将margin-bottom规则设置为auto，比如：

.child {
  margin-bottom: auto;
}

并且子元素将与父元素的最顶部对齐。

如果您愿意，也可以使用align-self 规则：

.child {
  align-self: flex-start;
}

Answer 6

这也可以在我们要拉伸的元素上使用align-self: stretch; 来解决。

有时希望在 Flexbox 设置中仅拉伸一项。

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  align-self: stretch;
  background-color: red;
}
.flex-2-child {
  background-color: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

Answer 7

.container {
    height: 200px;
    width: 500px;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-1 {
   flex:1 0 100px;
    background-color: blue;
}
.flex-2 {
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1 0 100%;
    background-color: red;
}
.flex-2-child {
    flex: 1 0 100%;
    height: 100%;
    background-color: green;
}

<div class="container">
    <div class="flex-1"></div>
    <div class="flex-2">
        <div class="flex-2-child"></div>
    </div>
</div>

http://jsfiddle.net/2ZDuE/750/

Answer 8

一个想法是display:flex; 和flex-direction: row; 是用.flex-1 和.flex-2 填充container div，但这并不意味着.flex-2 有一个默认的height:100%;，即使它延伸到全高。

若要让子元素 (.flex-2-child) 与 height:100%;，您需要将父元素设置为 height:100%; 或在 .flex-2 div 上使用 display:flex; 和 flex-direction: row;。

据我所知，display:flex 不会将所有子元素的高度扩展到 100%。

一个小演示，去掉了.flex-2-child的高度，在.flex-2上使用了display:flex;： http://jsfiddle.net/2ZDuE/3/

Answer 9

有趣的事实：height-100% 适用于最新的 chrome；但不是在 Safari 中；

---

所以顺风的解决方案是

“弹性项目-拉伸”

https://tailwindcss.com/docs/align-items

并递归地应用到孩子的孩子的孩子...

Answer 10

.parent {
    display: flex;
}

.child {
    min-height: 100%;
}

Answer 11

.container { . . . . 对齐项目：拉伸； . . . . }

Answer 12

这是我使用css+ 的解决方案。

首先，如果第一个孩子 (flex-1) 应该是 100px，它不应该是 flex。

实际上，在css+ 中，您可以设置灵活和/或静态元素（列或行），您的示例变得如此简单：

<div class="container">
  <div class="EXTENDER">
    <div class="COLS">
      <div class="CELL _100px" style="background-color:blue">100px</div>
      <div class="CELL _FLEX" style="background-color:red">flex</div>
    </div>
  </div>
</div>

容器 CSS：

.container {
    height: 200px;
    width: 500px;
    position: relative;
}

显然包括css+ 0.2 core。

这里是the fiddle。