676

我正在尝试填充 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 中不起作用。

4

12 回答 12

564

采用align-items: stretch

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

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

注意height: 100%应该从子组件中移除（见注释）。

或者align-items，您可以align-self仅在.flex-2-child要拉伸的项目上使用。

于 2015-09-08T20:04:03.010 回答
286

我在这里回答了一个类似的问题。

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

另请参阅此jsFiddle进行演示，尽管我只添加了 WebKit 前缀，因此在 Chrome 中打开。

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

  1. 让弹性项目的孩子填充高度 100%
  • 设置position: relative;在孩子的父母身上。
  • 放在position: absolute;孩子身上。
  • 然后，您可以根据需要设置宽度/高度（在我的示例中为 100%）。
  1. 修复 Chrome 中调整大小滚动的“怪癖”
  • 放在overflow-y: auto;可滚动的 div 上。
  • 可滚动的 div 必须明确指定高度。我的样本已经有 100% 的高度，但如果没有应用，您可以指定height: 0;

有关滚动问题的更多信息，请参阅此答案。

于 2013-03-13T15:29:26.483 回答
253

如果我理解正确，您希望 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 项，但它的父项是。

于 2013-05-27T10:38:08.603 回答
27

我想 Chrome 的行为更符合 CSS 规范（尽管它不太直观）。根据 Flexbox 规范，property的默认stretch值仅更改元素的“cross size 属性”（在本例中为 ）的使用值。而且，据我了解CSS 2.1 规范，百分比高度是根据父级的指定值计算的，而不是其使用值。父级的指定值不受任何 flex 属性的影响，仍然是.align-selfheightheightheightauto

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

于 2013-09-18T08:08:27.323 回答
20

我自己找到了解决方案。假设您有以下 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;
}
于 2018-05-22T18:12:49.323 回答
9

这也可以通过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>

于 2019-10-02T18:39:24.757 回答
5 

.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/

于 2016-01-17T11:13:12.500 回答
4

一个想法是display:flex;with用andflex-direction: row;填充containerdiv ，但这并不意味着它有一个 default ，即使它被扩展到全高。.flex-1.flex-2.flex-2height:100%;

并且要拥有一个带有 的子元素 ( .flex-2-child) height:100%;，您还需要在div上将父元素设置为height:100%;或使用display:flex;with 。flex-direction: row;.flex-2

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

一个小演示，删除了高度并.flex-2-child用于：http : //jsfiddle.net/2ZDuE/3/display:flex;.flex-2

于 2013-03-13T09:54:47.447 回答
2

有趣的事实：height-100% 适用于最新的 chrome；但不是在野生动物园中；

所以顺风的解决方案是

“弹性项目-拉伸”

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

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

于 2021-02-09T08:17:27.400 回答
1 
.parent {
    display: flex;
}

.child {
    min-height: 100%;
}
于 2021-11-15T19:09:44.093 回答
-8

。容器 { 。. . . 对齐项目：拉伸；. . . . }

于 2019-03-13T02:45:31.490 回答
-14

这是我使用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。

这是小提琴。

于 2015-12-01T17:41:54.730 回答