CSS flexbox 列子项上的高度 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20959600/
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
Height 100% on flexbox column child
提问by CourtDemone
I'm having troubles with a flexbox column in that children of the flex'd element don't respond to heightin percentages. I've only checked this in Chrome, and from what I understand it's a Chrome only problem. Here's my example:
我在使用 flexbox 列时遇到了问题，因为 flex'd 元素的子元素没有height按百分比响应。我只在 Chrome 中检查过这个，据我所知，这只是 Chrome 的问题。这是我的例子：
HTML
HTML
<div class='flexbox'>
<div class='flex'>
<div class='flex-child'></div>
</div>
<div class='static'></div>
</div>
CSS
CSS
.flexbox{
position:absolute;
background:black;
width:100%;
height:100%;
display: flex;
flex-direction:column;
}
.flex{
background:blue;
flex:1;
}
.flex-child{
background:red;
height:100%;
width:100%;
display:block;
}
.static{
background:green;
width:100%;
height:5rem;
}
I want it so the red .flex-childfills the blue .flex. Why doesn't height:100%work?
我想要它，所以红色.flex-child填充蓝色.flex。为什么不起作用height:100%？
回答by CourtDemone
TL;DR:Set .flexto display:flex, and get rid of the height:100%on .flex-child. You can see the modified CodePen here.
TL;DR：设置.flex为display:flex，并去掉height:100%on .flex-child。您可以在此处查看修改后的 CodePen。
Why it works:
为什么有效：
I learned from this similar questionthat, according to the flexbox spec, an align-self:stretchvalue (the default for a flex'd element) changes only the used valueof an element's cross-size property (in this case, height). Percentages however are calculated from the specified valueof the parent's cross-size property, not it's used value. If you ever crack open your Inspector and see height:100%under 'Styles' but height:1200pxunder 'Computed', then that's showing you the specifiedand usedvalues respectively.
我从这个类似的问题中了解到，根据 flexbox 规范，一个align-self:stretch值（flex'd 元素的默认值）仅更改元素的 cross-size 属性（在本例中为）的使用值height。然而，百分比是根据父项的跨尺寸属性的指定值计算的，而不是它的使用值。如果您打开 Inspector 并height:100%在“样式”height:1200px下但在“计算”下看到，则分别显示指定和使用的值。
It seems that Chrome follows the spec to the tee in this respect. That means that setting height:100%on .flex-childmeans 100% of the specified heightof .flex. Since we haven't specified a heighton .flex, that means we're grabbing 100% of the default height, which is auto. See why the layout engine is getting confused?
在这方面，Chrome 似乎遵循了 T 恤的规范。这意味着，设定height:100%上.flex-child装置指定的100％height的.flex。由于我们没有指定heighton .flex，这意味着我们将获取 100% 的默认值height，即auto. 看到为什么布局引擎变得混乱了吗？
Setting .flexto display:flexand removing the height:100%from .flex-child(so that it doesn't keep trying to set 100% of auto) will make .flex-childfill all of .flex
设置.flex为display:flex和删除height:100%from .flex-child（以便它不会一直尝试设置 100% of auto）将.flex-child填充所有.flex
When this won't work:
当这不起作用时：
This won't work if you're trying to fill only some of .flex, ex. trying to set .flex-childto height:90%, because flexing the child means that it'll fill all the available space. I thought you might be able to hack it with absolute positioning, but that doesn't seem to work either. You could hack by adding a second child to .flexthat we'll call .spacer, and setting .spacerto flex:1and .flex-childto flex:9(be sure to set flex-direction:columnon .flextoo). A hack, but the only way I could fix it. Here's the CodePen.
如果您只想填充其中的一些，这将不起作用.flex，例如。尝试设置.flex-child为height:90%，因为弯曲孩子意味着它将填满所有可用空间。我以为你可以用绝对定位来破解它，但这似乎也不起作用。你可以通过添加第二个孩子破解.flex，我们会打电话.spacer，并设置.spacer到flex:1和.flex-child到flex:9（一定要设置flex-direction:column上.flex也是如此）。一个黑客，但我能修复它的唯一方法。这是 CodePen。
Hopefully we don't have to keep relying on this though and they'll just change the spec to act more as expected.
希望我们不必继续依赖于此，他们只会更改规范以更符合预期。
