如何让flexbox儿童100％的父母身高？

Question

如何让flexbox儿童100％的父母身高？我正在尝试填充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>这是JSFiddleflex-2-child 没有填写所需的高度，除非在以下两种情况下：flex-2 高度为100％（这很奇怪，因为弹性项目默认为100％+ Chrome中存在错误）flex-2-child 有一个绝对的位置也很不方便这在目前的Chrome或Firefox中不起作用。

Answer 1

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

另请参阅这个jsFiddle进行演示，虽然我只在Chrome中添加了webkit前缀。

你基本上有2个问题，我将分别处理。

1. 让灵活项目的孩子填充高度100％

• 设置position: relative;在孩子的父母身上。

• 坐落position: absolute;于孩子。

• 然后，您可以根据需要设置宽度/高度（我的样本中为100％）。

2. 在Chrome中修复调整大小滚动“quirk”

• 穿上overflow-y: auto;可滚动的div。

• 可滚动div必须具有指定的显式高度。我的样本已经有100％的高度，但如果没有应用，你可以指定height: 0;

Answer 2

使用 align-items: 'stretch'

类似于David Storey的回答，我的工作是

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

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