Html Flexbox - 儿童扩展以填充高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38295191/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox - Children expand to fill height
提问by Hobbyist
I have a dynamic footer on my page and I expect the content above it to scale to reach the top of the footer, that's fine and all, but I'm having a problem:
我的页面上有一个动态页脚，我希望它上面的内容可以缩放到页脚的顶部，这很好，但是我遇到了一个问题：
#snippet-container {
height: 300px;
width: 200px;
}
#page {
display: flex;
flex-flow: column;
height: 100%;
}
#content {
flex: 1 1 auto;
background: blue;
}
#content .test {
width: 100%;
height: 100%;
background: yellow;
border: 2px solid red;
}
#footer {
flex: 0 1 10vh;
background: black;
}<div id="snippet-container">
<div id="page">
<div id="content">
<div class="test"></div>
</div>
<div id="footer"></div>
</div>
</div>I would expect the .testelement to fill the #contentelement, hence the 100%/100% width/heighthowever it does not.
我希望.test元素填充#content元素，因此100%/100% width/height它没有。
You can see this reflected as I gave the .testelement a red border in the snippet.
您可以看到这一点，因为我.test在代码段中为元素添加了红色边框。
回答by Ricky
PROBLEM:
问题：
The problem is that your #pageflex container is not reachingthe .testelement since .testis not a child, it is a descendant of the flex item.
问题是，你的#pageFlex容器没有达到的.test元素，因为.test是不是一个孩子，这是Flex项目的后代。
The contents of a flex container consists of zero or more flex items: each child of a flex container becomes a flex item.
弹性容器的内容由零个或多个弹性项目组成：弹性容器的每个子项都成为弹性项目。
Each flex item is affected by the flex container, but the flex item's descendants are not.
每个 flex 项都受 flex 容器的影响，但 flex 项的后代不受。
SOLUTION:
解决方案：
You need to add display: flexto your #contentas well.
你也需要添加display: flex到你的#content。
CODE SNIPPET:
代码片段：
#snippet-container {
height: 300px;
width: 200px;
}
#page {
display: flex;
flex-flow: column;
height: 100%;
}
#content {
display: flex;
height: 100%;
background: blue;
}
#content .test {
width: 100%;
background: yellow;
border: 2px solid red;
}
#footer {
flex: 0 1 10vh;
background: black;
}<div id="snippet-container">
<div id="page">
<div id="content">
<div class="test"></div>
</div>
<div id="footer"></div>
</div>
</div>回答by sifriday
This does it for you:
这为你做：
https://jsfiddle.net/wjr0wwht/2/
https://jsfiddle.net/wjr0wwht/2/
In order to make the 'test' div grow to full height, you need to make content also a display: flexlike this:
为了使“测试”div 长到全高，您需要使内容也display: flex像这样：
#content {
flex: 1 1 auto;
background: blue;
display: flex;
flex-direction: column;
}
and then make test itself grow:
然后让测试本身增长：
#content .test {
background: yellow;
border: 2px solid red;
flex-grow: 1;
}
