CSS 我怎样才能让 Flexbox 孩子的身高达到父母的 100%？

How can I make Flexbox children 100% height of their parent?

提问by Raz

I'm trying to fill the vertical space of a flex item inside a Flexbox.

我正在尝试填充 Flexbox 内的 flex 项目的垂直空间。

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

And here's the JSFiddle

这是JSFiddle

flex-2-childdoesn't fill the required height except in the two cases where:

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

1. flex-2has a height of 100% (which is weird because a flex item has a 100% by default + it is buggy in Chrome)
2. flex-2-childhas a position absolute which is also inconvenient

1. flex-2具有 100% 的高度（这很奇怪，因为默认情况下 flex 项目具有 100% + 在 Chrome 中有问题）
2. flex-2-child有一个绝对位置，这也很不方便

This doesn't work in Chrome or Firefox currently.

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

采纳答案by B T

Use align-items: stretch

用 align-items: stretch

Similar to David Storey's answer, my workaround is:

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

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

Alternatively to align-items, you can use align-selfjust on the .flex-2-childitem you want stretched.

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

回答by Brett Postin

I have answered a similar question here.

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

I know you have already said position: absolute;is inconvenient but it works. See below for further information on fixing the resize issue.

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

Also see this jsFiddlefor a demo, although I have only added webkit prefixes so open in Chrome.

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

You basically have 2 issues which I will deal with separately.

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

1. Getting the child of a flex-item to fill height 100%
   • Set position: relative;on the parent of the child.
   • Set position: absolute;on the child.
   • You can then set width/height as required (100% in my sample).
2. Fixing the resize scrolling "quirk" in Chrome
   • Put overflow-y: auto;on the scrollable div.
   • The scrollable div must have an explicit height specified. My sample already has height 100% but if none is already applied you can specify height: 0;

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

See this answerfor more information on the scrolling issue.

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

回答by David Storey

If I understand correctly, you want flex-2-child to fill the height and width of its parent, so that the red area is fully covered by the green?

如果我理解正确，您希望 flex-2-child 填充其父级的高度和宽度，以便红色区域完全被绿色覆盖？

If so, you just need to set flex-2 to use flexbox:

如果是这样，您只需要设置 flex-2 即可使用 flexbox：

.flex-2 {
    display: flex;  
}

Then tell flex-2-child to become flexible:

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

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

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

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

The reason is that flex-2-child is not a flexbox item, but its parent is.

原因是 flex-2-child 不是 flexbox 项，但它的父项是。

回答by Ilya Streltsyn

I suppose that Chrome's behavior is more consistent with the CSS spec (though it's less intuitive). According to Flexbox spec, the default stretchvalue of align-selfproperty changes only the usedvalueof the element's "cross size property" (height, in this case). And, as I understand the CSS2.1 spec, the percentage heights are calculated from the specifiedvalue of the parent's height, not its used value. The specified value of the parent's heightisn't affected by any flex properties and is still auto.

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

Setting explicit height: 100%makes it formallypossible to calculate the percentage height of the child, just like setting height: 100%to htmlmakes it possible to calculate the percentage height of bodyin CSS2.1.

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

回答by user3896501

I found the solution by myself, suppose you have the CSS below:

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

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

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

In this case, setting the height 100% will not work, so what I do is setting the margin-bottomrule to auto, like:

在这种情况下，将高度设置为 100% 将不起作用，所以我所做的是将margin-bottom规则设置为auto，例如：

.child {
  margin-bottom: auto;
}

and the child will be aligned to the topmost of the parent, you can also use the align-selfrule anyway if you prefer.

并且孩子将与父母的最顶层对齐，align-self如果您愿意，您也可以使用该规则。

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

回答by rmagnum2002

An idea would be that display:flex;with flex-direction: row;is filling the containerdiv with .flex-1and .flex-2, but that does not mean that .flex-2has a default height:100%;even if it is extended to full height and to have a child element (.flex-2-child) with height:100%;you'll need to set the parent to height:100%;or use display:flex;with flex-direction: row;on the .flex-2div too.

一个想法是display:flex;with用andflex-direction: row;填充containerdiv ，但这并不意味着即使它扩展到全高并且有一个子元素（）也有默认值，你需要将父元素设置为或使用与上格了。.flex-1.flex-2.flex-2height:100%;.flex-2-childheight:100%;height:100%;display:flex;flex-direction: row;.flex-2

From what I know display:flexwill not extend all your child elements height to 100%.

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

A small demo, removed the height from .flex-2-childand used display:flex;on .flex-2: http://jsfiddle.net/2ZDuE/3/

一个简单演示，移除高度.flex-2-child和使用display:flex;上.flex-2： http://jsfiddle.net/2ZDuE/3/

回答by Carol McKay

html

html

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

css

css

.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;
}

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

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

回答by GiorgosK

This can also be solved with align-self: stretch;on the element we want to be stretched.

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

Sometimes it is desireable to only stretch one item in a flexbox setup.

有时在 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>

回答by HRK

.container { . . . . align-items: stretch; . . . . }

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

回答by Marco Allori

This is my solution using css+

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

First of all if first child (flex-1) should be 100px shouldn't be flex. In css+in fact you can set flexible and/or static elements (columns or rows) and your example become as easy as this:

首先，如果第一个孩子 (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>

container css:

容器CSS：

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

and obviously include css+ 0.2 core

并且显然包括css+ 0.2 核心

hear the fiddle

听小提琴