flexbox 列子项上的高度 100% [英] Height 100% on flexbox column child

问题描述

我在使用 flexbox 列时遇到了问题，因为 flex'd 元素的子元素不响应 height 百分比.我只在 Chrome 中检查过这个，据我所知，这只是 Chrome 的问题.这是我的例子:

HTML

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

CSS

.flexbox{位置:绝对；背景:黑色；宽度:100%；高度:100%；显示:弹性；弹性方向:列；}.柔性{背景:蓝色；弹性:1;}.flex-孩子{背景:红色；高度:100%；宽度:100%；显示:块；}.静止的{背景:绿色；宽度:100%；高度:5rem；}

这是 CodePen.

我想要它，所以红色 .flex-child 填充蓝色 .flex.为什么 height:100% 不起作用?

解决方案

TL;DR: 将 .flex 设置为 display:flex,并去掉 .flex-child 上的 height:100%.您可以在此处查看修改后的 CodePen.

为什么有效:

我从这个类似的问题中了解到，根据 flexbox 规范，align-self:stretch 值(flex 元素的默认值)仅更改元素的交叉尺寸属性的使用值(在本例中为 高度).然而，百分比是根据父项的跨尺寸属性的指定值计算的，而不是它的使用值.如果您打开 Inspector 并在样式"下看到 height:100%，但在Computed"下看到 height:1200px，则显示的是指定的 和 used 分别是值.

似乎 Chrome 在这方面遵循了发球台的规范.这意味着在 .flex-child 上设置 height:100% 意味着 .flex 的指定 height 的 100%>.由于我们没有在 .flex 上指定 height，这意味着我们抓取了默认 height 的 100%，也就是 自动.看看为什么布局引擎会变得混乱?

将 .flex 设置为 display:flex 并从 .flex-child 中移除 height:100%(这样它就不会继续尝试设置 auto 的 100%)将使 .flex-child 填充所有 .flex

当这不起作用时:

如果您只想填充部分 .flex，例如，这将不起作用.尝试将 .flex-child 设置为 height:90%，因为弯曲孩子意味着它将填充所有可用空间.我以为你可以用绝对定位来破解它，但这似乎也不起作用.你可以通过向 .flex 添加第二个孩子，我们称之为 .spacer，并将 .spacer 设置为 flex:1 和 .flex-child 到 flex:9 (一定要在 上设置 flex-direction:column.flex 也是).一个黑客，但我能修复它的唯一方法.这是 CodePen.

希望我们不必继续依赖这个，他们只会改变规范以更符合预期.

I'm having troubles with a flexbox column in that children of the flex'd element don't respond to height in percentages. I've only checked this in Chrome, and from what I understand it's a Chrome only problem. Here's my example:

HTML

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

Here's the CodePen.

I want it so the red .flex-child fills the blue .flex. Why doesn't height:100% work?

解决方案

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. Here's the CodePen.

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

这篇关于flexbox 列子项上的高度 100%的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！