为什么在父母没有定义身高的情况下，孩子身上的身高比例是有效的?

I'm using Bootstrap 4 for simplicity.

为了简单起见，我使用Bootstrap 4。

My questions are:

我的问题是:

Why setting 100% height on child (.inner) of flex item works? For every element in this code height is "set" to auto.
为什么要在flex项目的子(.inner)上设置100%的高度?对于此代码高度中的每个元素，都将其设置为auto。
How .inner elements know that 100% height is the height of the heighest flex child (.col-4) in a row?
内部元素如何知道100%的高度是一排中最高的flex子(. col4)的高度?

CODEPEN

HTML:

<div class="container">
  <h3>Without 100% height on inner elements</h3>
  <div class="row">
    <div class="col-4">
      <div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
    <div class="col-4">
      <div class="inner">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
    </div>
  </div>
</div>

<div class="container">
  <h3>With 100% height on inner elements</h3>
  <div class="row">
    <div class="col-4">
      <div class="inner h-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
    <div class="col-4">
      <div class="inner h-100">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner h-100">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner h-100">Inner</div>
    </div>
    <div class="col-4">
      <div class="inner h-100">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
    </div>
  </div>
</div>

CSS:

.inner {
  background: #ddd;
}
h-100 {
  height: 100%;
}

1 个解决方案

#1

Why setting 100% height on child (.inner) of flex item works? For every element in this code height is "set" to auto.

为什么要在flex项目的子(.inner)上设置100%的高度?对于此代码高度中的每个元素，都将其设置为auto。

Since the beginnings of CSS in the 1990s, a percentage height on an in-flow child element has required a defined height on the parent element. Otherwise the child defaults to height: auto.

自20世纪90年代CSS开始以来，流中子元素的百分比高度要求父元素的定义高度。否则，子节点默认为高度:auto。

The only acceptable height reference on the parent has come from the height property. Other forms of height, such as min-height and max-height, have been invalid for this purpose.

父节点上唯一可接受的高度引用来自高度属性。其他形式的高度，如米高和高度，都是无效的。

Although the spec has never explicitly specified that the parent must use the height property – only the generic work "height" has been used – using the height property has become the traditional interpretation and predominant implementation across browsers.

虽然规范从来没有明确规定父类必须使用高度属性——只是使用了通用的工作“高度”——但是使用高度属性已经成为跨浏览器的传统解释和主要实现。

In recent years, however, browsers have broadened their interpretation of spec language to include other forms of height, such as flex-basis.

然而，近年来，浏览器已经扩展了对spec语言的解释，将其他形式的高度包括进来，比如基于flex的高度。

So, in 2017, it's not surprising that height: 100% does not resolve to height: auto in all cases where the parent has no specified height.

所以，在2017年，身高:100%不等于身高也就不足为奇了:在所有父母没有指定身高的情况下，都是自动驾驶。

Today's browsers may also seek a height reference from flex-grow, flex-basis, align-items or something else.

如今的浏览器也可能会从flex-grow、flex- based、aligni -items或其他东西中寻找身高参考。

Here a some more details about the height property and percentage values:

这里有一些关于高度属性和百分比值的详细信息:

Why is percentage height not working on my div?
为什么百分比高度对我的div不起作用?
Chrome / Safari not filling 100% height of flex parent
Chrome / Safari没有100%填充flex父类的高度
Why does my div height 100% work only when DOCTYPE is removed?
为什么我的div高度100%只在DOCTYPE被删除时有效?

And then there are interventions:

然后还有干预措施:

An intervention is when a user agent decides to deviate slightly from a standardized behavior in order to provide a greatly enhanced user experience.

干预是当用户代理决定稍微偏离标准化的行为，以提供极大增强的用户体验。

This is browsers makers basically saying: "Thanks for the spec guidance, but we know our users and we can do better." So they go off-script hoping to be more thoughtful and intuitive.

这是浏览器制造商的基本说法:“感谢规范指导，但我们了解我们的用户，我们可以做得更好。”所以他们想要更有思想和直觉。

Here are several examples of possible Chrome interventions:

以下是一些可能的Chrome干预措施的例子:

Why doesn't flex item shrink past content size?
为什么flex项目不缩小内容大小?
pseudo element not aligning at top left corner
伪元素在左上角没有对齐
How to make images stay within the rows of a css grid container?
如何使图像保持在css网格容器的行中?
Google Chrome viewport-anchored expand direction with flexbox
使用flexbox扩展方向

So, between interventions and a broader interpretation of the rules, height: 100% may give full height even when the parent has no height defined.

因此，在干预和对规则更广泛的解释之间，身高:100%可能会给出完整的身高，即使父母没有定义身高。

How do .inner elements know that 100% height is the height of the highest flex child (.col-4) in a row?

内部元素如何知道100%的高度是一行中最高的flex子(. col4)的高度?

They don't. They just stretch to the height of the container, who's height is set by the tallest item in the row.

他们没有。它们只是延伸到容器的高度，容器的高度由排中最高的项决定。

#1