在 flexbox 中使用“高度:100%"和“对齐项目:拉伸" [英] Using 'height: 100%' and 'align-items: stretch' in flexbox

问题描述

我有一个带有直接子项的 flexbox，该子项使用 align-items:stretch 声明.

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

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

这是一种错误吗?我是否必须使用 align-items: stretch AND height: 100% 设置 flexbox 的直接子项来实现我想要的?这对我来说似乎是多余的.

这是一个例子:

html,身体 {边距:0；高度:100%；}.flexbox {显示:弹性；弹性方向:行；高度:100%；背景颜色:绿色；}.flexbox-child {//高度:100%；取消注释这将使其工作对齐项目:拉伸；背景颜色:蓝色；}.flexbox-孙子{高度:100%；背景颜色:红色；}

<div class="flexbox-child"><div class="flexbox-grand-child">我想被拉伸到底部

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

谢谢！

解决方案

这是一个复杂的案例.

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

然后，.flexbox-grand-child 有一个百分比 height，其行为如下:

<块引用>

百分比是相对于高度计算的生成框的包含块.如果包含的高度块没有明确指定(即，它取决于内容height)，并且这个元素不是绝对定位的，值计算为自动".

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

然而，这种依赖只是由于新的min-height: auto.但是在考虑 min-height 之前，flex item 的高度将是(由于初始的 align-self:stretch)容器的高度，即明确指定，忽略内容.

那么，Firefox 认为 .flexbox-child 的高度不依赖于它的内容，所以它的孩子的 height 百分比应该起作用.然后你的代码就可以工作了.

然而，Chrome 并不这么认为.

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

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

I have a flexbox with a direct child that is declared with align-items: stretch.

Inside this flexbox's direct child, I would like to have a div container that also uses its parent's full height (by setting height: 100%).

However, the div container won't stretch to 100% height of its parent, unless I also set height: 100% on the flexbox's direct child.

Is it kind of bug? Must I set the flexbox's direct child with align-items: stretch AND height: 100% to achieve what I want? It seem redundant to me.

Here is an example:

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

Thanks!

解决方案

It's a complicated case.

Your .flexbox-child is only a flex item, but not a flex container. Therefore, align-items: stretch, which only applies to flex containers, is ignored.

Then, .flexbox-grand-child has a percentage height, which behaves like this:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

The containing block is the flex item (.flexbox-child), which has no explicit height, and its height seems to depend on the content.

However, this dependency is only due to the new min-height: auto. But before taking min-height into account, the height of the flex item will be (due to the initial align-self: stretch) the height of the container, which is specified explicitly, ignoring the content.

Then, Firefox considers that the height of .flexbox-child does not depend on its contents, so height percentages in its children should work. And then your code works.

However, Chrome doesn't think so.

I'm not sure which one does it right. It doesn't help that height is only defined in the old CSS2.1 and in CSS basic box model, which is an inconsistent draft.

To be safe, better set the height of .flexbox-child explicitly. Or make it a flex container.

这篇关于在 flexbox 中使用“高度:100%"和“对齐项目:拉伸"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！