包含块是如何确定的

Question

我仍然很难理解元素如何选择它们的包含块，相对于它们的相对值，例如height 被评估。

body {
  margin: 0;
}

.outer {
  min-height: 200px;
  background: red;
  overflow: hidden;
}

.inner {
  height: 100%;
  background: green;
}

<div class="outer">
  Hello,
  <div class="inner">world!</div>
</div>

这里的外部容器只有一个最小高度集，这显然不足以将自己断言为包含块，即使溢出隐藏。

我的理解是，不隐藏溢出，存在循环依赖，因为当子大于 200 px 时，父大小取决于子大小，但隐藏溢出，循环依赖应该消失。

更奇怪的是，当我将 body 设置为显示 flex 时，它又开始“工作”了。

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0;
}
.outer {
  min-height: 200px;
  background: red;
  overflow: hidden;
}

.inner {
  height: 100%;
  background: green;
}

<div class="outer">
  Hello,
  <div class="inner">world!</div>
</div>

这背后的逻辑是什么？

Answer 1

首先，两种情况下的包含块对于inner 是相同的，它是outer。 overflow 在这里不起作用，flexbox 的用法也是如此。更多详情：https://www.w3.org/TR/CSS2/visudet.html#containing-block-details

现在，您需要了解有关百分比高度的技巧。一般规则是：“包含块需要有一个明确的高度”

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

考虑到这一点，您可以假设您的百分比高度在这两种情况下都会失败，但情况已经发生变化，现在我们可以在某些特殊情况下解决百分比高度问题，即我们没有在包含块上定义任何明确的高度。

有时，百分比大小的盒子的包含块的大小取决于盒子本身的内在大小贡献，从而产生循环依赖。在计算这种盒子的固有尺寸贡献（包括任何基于内容的自动最小尺寸的计算）时，一个百分比值会根据与固有尺寸贡献（循环百分比尺寸）相同的轴上的尺寸进行解析: ^ref

如果你继续阅读，你会发现很多复杂的概念和定义不容易理解。我不会详细说明所有这些，但您的第二个案例就是其中之一。

为方便起见：Flexbox 强制某些尺寸明确允许解析高度百分比 (https://drafts.csswg.org/css-flexbox-1/#definite-sizes)。

还有更多与 flexbox 和 CSS 网格相关的案例：

Percentage 'min-height' works only when element has indirect parent with 'display: flex'

Why does `height: 100%` value 'work' for child tags of grid-items?

https://stackoverflow.com/a/52137966/8620333