如何使flexbox子代的父母高度为100％？

本文翻译自：How to make flexbox children 100% height of their parent?

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-child doesn't fill the required height except in the two cases where: 除了以下两种情况外， flex-2-child不会填充所需的高度：

flex-2 has a height of 100% (which is weird because a flex item has a 100% by default + it is buggy in Chrome) flex-2的高度为100％（这很奇怪，因为flex项默认情况下为100％+在Chrome中有问题）
flex-2-child has a position absolute which is also inconvenient flex-2-child具有绝对位置，这也不方便

This doesn't work in Chrome or Firefox currently. 目前，该功能不适用于Chrome或Firefox。

#1楼

参考：https://stackoom.com/question/12XLQ/如何使flexbox子代的父母高度为

#2楼

An idea would be that display:flex; 一个想法是display:flex; with flex-direction: row; 带有flex-direction: row; is filling the container div with .flex-1 and .flex-2 , but that does not mean that .flex-2 has a default height:100%; 用.flex-1和.flex-2填充container div，但这并不意味着.flex-2的默认height:100%; even if it is extended to full height and to have a child element ( .flex-2-child ) with height:100%; 即使扩展到全高并具有height:100%;的子元素（ .flex-2-child ） height:100%; you'll need to set the parent to height:100%; 您需要将父级设置为height:100%; or use display:flex; 或使用display:flex; with flex-direction: row; 带有flex-direction: row; on the .flex-2 div too. 在.flex-2 div上也是如此。

From what I know display:flex will not extend all your child elements height to 100%. 根据我所知道的display:flex不会将所有子元素的高度扩展到100％。

A small demo, removed the height from .flex-2-child and used display:flex; 一个小演示，删除了.flex-2-child的高度，并使用display:flex; on .flex-2 : http://jsfiddle.net/2ZDuE/3/ 在.flex-2 ： http : //jsfiddle.net/2ZDuE/3/

#3楼

I have answered a similar question here . 我在这里回答了类似的问题。

I know you have already said position: absolute; 我知道你已经说过position: absolute; is inconvenient but it works. 不方便，但可以。 See below for further information on fixing the resize issue. 有关解决调整大小问题的更多信息，请参见下文。

Also see this jsFiddle for 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. 您基本上有2个问题，我将分别处理。

Getting the child of a flex-item to fill height 100% 让弹性项目的子项填充高度100％
- Set position: relative; 设定position: relative; on the parent of the child. 在孩子的父母身上。
- Set position: absolute; 设定position: absolute; on the child. 在孩子身上。
- You can then set width/height as required (100% in my sample). 然后，您可以根据需要设置宽度/高度（在我的示例中为100％）。
Fixing the resize scrolling "quirk" in Chrome 修复Chrome中调整大小的滚动“怪癖”
- Put overflow-y: auto; 把overflow-y: auto; on the scrollable div. 在可滚动的div上
- The scrollable div must have an explicit height specified. 可滚动div必须具有指定的显式高度。 My sample already has height 100% but if none is already applied you can specify height: 0; 我的样本已经具有高度100％，但是如果没有应用height: 0;可以指定height: 0;

See this answer for more information on the scrolling issue. 有关滚动问题的更多信息，请参见此答案。

#4楼

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项，但它的父项是flexbox。

#5楼

I suppose that Chrome's behavior is more consistent with the CSS spec (though it's less intuitive). 我认为Chrome的行为与CSS规范更加一致（尽管不太直观）。 According to Flexbox spec, the default stretch value of align-self property changes only the used value of the element's "cross size property" ( height , in this case). 根据Flexbox规范， align-self属性的默认stretch值仅更改元素的“ cross size属性”（在这种情况下为height ）的使用值。 And, as I understand the CSS2.1 spec , the percentage heights are calculated from the specified value of the parent's height , not its used value. 而且，据我了解CSS2.1规范，百分比高度是根据父级height的指定值（而不是其使用的值）计算得出的。 The specified value of the parent's height isn't affected by any flex properties and is still auto . 父母height的指定值不受任何flex属性影响，并且仍为auto 。

Setting explicit height: 100% makes it formally possible to calculate the percentage height of the child, just like setting height: 100% to html makes it possible to calculate the percentage height of body in CSS2.1. 设置显式的height: 100%使得正式计算子项的百分比高度成为可能，就像将height: 100%设置为html使得计算CSS2.1中的body的百分比高度成为可能。

#6楼

Use `align-items: stretch` 使用`align-items: stretch`

Similar to David Storey's answer, my work around is 与David Storey的答案类似，我的工作是

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

Alternatively to align-items , you can use align-self just on the .flex-2-child item you want stretched. 除了align-items ，您还可以在要拉伸的.flex-2-child项上使用align-self 。