高度100% 对柔性箱柱子

我在弹性元素的子元素不响应百分比 height的弹性方块列上遇到了麻烦。我只在 Chrome 中检查过这个问题,据我所知,这是一个 Chrome 专有的问题。下面是我的例子:

超文本标示语言

<div class='flexbox'>
<div class='flex'>
<div class='flex-child'></div>
</div>
<div class='static'></div>
</div>

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

这是密码笔。

我想让红色的 .flex-child填充蓝色的 .flex。为什么 height:100%不工作?

119144 次浏览

TL;DR: Set .flex to display:flex, and get rid of the height:100% on .flex-child. You can see the modified CodePen here.

Why it works:

I learned from this similar question that, according to the flexbox spec, an align-self:stretch value (the default for a flex'd element) changes only the used value of an element's cross-size property (in this case, height). Percentages however are calculated from the specified value of 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:1200px under 'Computed', then that's showing you the specified and used values respectively.

It seems that Chrome follows the spec to the tee in this respect. That means that setting height:100% on .flex-child means 100% of the specified height of .flex. Since we haven't specified a height on .flex, that means we're grabbing 100% of the default height, which is auto. See why the layout engine is getting confused?

Setting .flex to display:flex and removing the height:100% from .flex-child (so that it doesn't keep trying to set 100% of auto) will make .flex-child fill all of .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-child to 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 .flex that we'll call .spacer, and setting .spacer to flex:1 and .flex-child to flex:9 (be sure to set flex-direction:column on .flex too). A hack, but the only way I could fix it. .flex-child1

Hopefully we don't have to keep relying on this though and they'll just change the spec to act more as expected.