在flexbox中使用“height：100％”和“align-items：stretch” [英] Using 'height: 100%' and 'align-items: stretch' in flexbox

问题描述

我有一个flexbox与一个直接的孩子，用 align-items：stretch 声明。在这个flexbox的直接子代，我想有一个div容器，也使用其父的全高度（通过设置 height：100％）。但是，div容器不能伸展到其父对象的100％高度，除非我在flexbox的直接子对象上设置 height：100％。

这是错误吗？我必须设置flexbox的直接孩子与 align-items：stretch AND height：100％来实现我想要的？

这里是一个例子：（and a plunker - http://plnkr.co/edit/FACkwsC2y65NcbOaceur?p=preview ）

HTML：

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

CSS：

  html，body {
 margin：0; 
 height：100％; 
} 
 
 .flexbox {
 display：flex; 
 flex-direction：row; 
 height：100％; 
 background-color：green; 
} 
 
 .flexbox-child {
 align-items：stretch; 
 // height：100％; uncommenting这将使它工作
 background-color：blue; 
} 
 
 .flexbox-grand-child {
 height：100％; 
 background-color：red; 
} 
  

谢谢！

解决方案

这是一个复杂的情况。

您的 .flexbox-child 只有一个flex项，但不是一个flex容器。因此， align-items：stretch 仅适用于flex容器。

c $ c> .flexbox-grand-child 有一个百分比 height ，其行为如下：

百分比是相对于
生成的框的包含块的高度计算的。如果未明确指定包含
块的高度（即，它取决于内容
height），并且此元素不是绝对定位的，值
计算为'auto'。 / p>

包含块是flex项目（ .flexbox-child ），没有显式的高度，它的高度似乎取决于内容。

然而，这种依赖只是由于新的 min-height： auto 。但在考虑 min-height 之前，flex项目的高度将是（由于最初的 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: (and a plunker - http://plnkr.co/edit/FACkwsC2y65NcbOaceur?p=preview)

HTML:

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

CSS:

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

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

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

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

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中使用“height：100％”和“align-items：stretch”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！