在 flexbox 中使用“高度：100%”和“对齐项目：拉伸”[重复]

Posted 2023-03-06

技术标签:

【中文标题】在 flexbox 中使用“高度：100%”和“对齐项目：拉伸”[重复]【英文标题】：Using 'height: 100%' and 'align-items: stretch' in flexbox [duplicate] 【发布时间】：2016-02-01 03:18:39 【问题描述】：

我有一个带有直接子元素的弹性框，用 align-items: stretch 声明。

在这个 flexbox 的直接子级中，我想要一个 div 容器，它也使用其父级的全高（通过设置 height: 100%）。

但是，div 容器不会拉伸到其父级的 100% 高度，除非我还在 flexbox 的直接子级上设置了 height: 100%。

这是一种错误吗？我必须用align-items: stretch 和height: 100% 设置flexbox 的直接子级来实现我想要的吗？这对我来说似乎是多余的。

这是一个例子：

html,
body 
  margin: 0;
  height: 100%;


.flexbox 
  display: flex;
  flex-direction: row;
  height: 100%;
  background-color: green;


.flexbox-child 
  // height: 100%; uncommenting this will get it to work
  align-items: stretch;
  background-color: blue;


.flexbox-grand-child 
  height: 100%;
  background-color: red;

<div class="flexbox">
  <div class="flexbox-child">
    <div class="flexbox-grand-child">
      I want to be stretched till the bottom
    </div>
  </div>
</div>

http://plnkr.co/edit/FACkwsC2y65NcbOaceur?p=preview

谢谢！

【问题讨论】：

【参考方案1】：

这是一个复杂的案例。

您的.flexbox-child 只是一个弹性项目，而不是弹性容器。因此，仅适用于弹性容器的align-items: stretch 将被忽略。

那么，.flexbox-grand-child 有一个百分比height，其行为如下：

百分比是相对于高度计算的生成框的包含块。如果包含的高度块没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，该值计算为“自动”。

包含块是弹性项目（.flexbox-child），它没有明确的高度，它的高度似乎取决于内容。

但是，这种依赖关系只是由于新的min-height: auto。但在考虑min-height 之前，flex 项目的高度将是（由于初始align-self: stretch）容器的高度，这是明确指定的，忽略内容。

然后，Firefox 认为.flexbox-child 的高度不取决于其内容，因此其子项中的height 百分比应该有效。然后你的代码就可以工作了。

但是，Chrome 不这么认为。

我不确定哪一个做得对。 height 只在旧的 CSS2.1 和 CSS 基本框模型中定义，这无济于事，这是一个不一致的草案。

为了安全起见，最好明确设置.flexbox-child 的高度。或者让它成为一个弹性容器。

【讨论】：

是的，我会说你倒退了，错误在 FF 中。仅当“明确指定”高度时，百分比高度才有效。恕我直言，作为拉伸的弹性物品不符合条件。 Example fiddle @woestijnrog 是的，但 Firefox 的行为可能仍然有意义。查看我的更新。感谢您的详细回答。顺便说一句，“新的最小高度：自动”是什么意思？ @royv 以前，min-height 和 min-width 的初始值为 0。但是，flexbox 规范将其更改为 auto。对于大多数元素，auto 的行为类似于 0。但是，对于带有overflow: visible 的弹性项目，它会强制它们增长以覆盖其内容。见Implied Minimum Size of Flex Items 我想知道规范是否发生了变化。 FF(49) 和 Chrome(53) 似乎都没有问题让弹性项目的孩子达到 100% 的高度。但是 Safari (10) 无法处理它，需要在 flex 项目上设置特定的高度，以便孩子正确拉伸。【参考方案2】：

当你创建一个弹性容器时，只有子元素成为弹性项目。子级之外的后代不会成为弹性项目，弹性属性不适用于它们。

只需将display: flex 应用于弹性项目，它也会将其转换为弹性容器。然后像align-items: stretch 这样的默认弹性属性将应用于子项（现在是弹性项目）。

你写道：