为什么在父母没有定义身高的情况下，孩子的身高百分比是有效的？

Question

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

我的问题是：

1. 为什么设置100%高的孩子(.inner)的挠曲项目工作？对于此代码中的每个元素，高度“设置”为auto。
2. .inner元素如何知道100%的高度是行中最高的挠性子(.col-4)的高度？

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

Answer 1

为什么将100% height设置为flex项的子级(.inner)有效？对于此代码中的每个元素，height都“设置”为auto。

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

父级上唯一可接受的高度引用来自height属性。其他形式的身高，如min-height和max-height，都是无效的。

尽管规范从未明确指定父程序必须使用height属性-- 只使用了一般工作“高度”。 --但使用height属性已成为跨浏览器的传统解释和主要实现。

然而，近年来，浏览器已经扩大了对规范语言的解释，将其他形式的高度包括进来，比如flex-basis。

因此，在2017年，在父级没有指定的height: 100%的所有情况下，height: auto并没有解决height: auto的问题，这一点也不足为奇。

今天的浏览器还可能会从flex-grow、flex-basis、align-items或其他方面寻找高度参考。

这里有一些关于height属性和百分比值的更多细节：

• 为什么百分比身高在我的div上不起作用？
• Chrome / Safari不填充100%高的弯曲父母
• 为什么只有当DOCTYPE被移除时，我的div高度才能100%工作？

然后是干预措施

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

这是浏览器制造商基本上说：“感谢规范指导，但我们知道我们的用户，我们可以做得更好。”于是他们离开了剧本，希望能更周到、更直观。

以下是几个可能的Chrome干预的例子：

• 为什么flex项目不缩小超过内容的大小？
• 伪元素在左上角不对齐
• 如何使图像停留在css网格容器的行中？
• 谷歌Chrome视口-锚定扩展方向与柔性盒

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

.inner元素如何知道100%的高度是一行中最高的挠曲子(.col-4)的高度？

他们没有，他们只是延伸到容器的高度，谁的高度是由最高的项目在这一行。