html - 当 child 依赖于 parent ，而 parent 的依赖于 child 的时候，浏览器如何计算宽度

Question

我在我的 React 应用程序中遇到了各种故障、奇怪的渲染伪影等等，并且想知道从浏览器的 Angular 定义尺寸的方式。

假设我有一个网格显示，并且有一个 div，它有 grid-template-columns: 1fr auto 1fr 和一个子 div 跨越 grid-column: 2/3 - 换句话说跨越父网格的 auto 区域。

据我所知，网格模板列中的值 auto 定义要调整大小以适合其内容的列。

现在让我们添加一个 img 并将 max-width 设置为 100% - 换句话说，我们不想超过父容器的大小。

但是，父容器的宽度是由auto规则决定的——那么浏览器如何让子容器知道占用100%呢？

例子

.box {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  background-color: lightblue;
}

.box>div {
  border: 1px solid red;
  grid-column: 2 / 3;
  margin: 10px 10px 0px;
}

<div class="box">
  <div style="">
    <img src="https://via.placeholder.com/800" style="max-width:100%">
  </div>
</div>

Answer 1

为了解释这一点，我将从一个更简化的示例开始，该示例将产生相同的输出:

<div style="display:inline-block">
  <img src="https://via.placeholder.com/1000x100">
</div>

<div style="display:inline-block">
  <img src="https://via.placeholder.com/1000x100" style="max-width:100%">
</div>

<div style="display:inline-block">
  <!-- even a big explicit width specified won't change the behavior -->
  <img src="https://via.placeholder.com/1000x100" style="wdith:2000px;max-width:100%">
</div>

<div style="display:inline-block">
  <img src="https://via.placeholder.com/1000x100" style="width:100%">
</div>

我们有一个 inline-block 元素，所以它的宽度取决于它的内容和 max-width:100%(或 width:100% ) 会给我们奇怪的结果。

要理解这一点，我们需要引用规范，更准确地说是 Percentage Sizing 部分，我们可以在其中阅读:

Sometimes the size of a percentage-sized box’s containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency. When calculating the intrinsic size contribution of such a box (including any calculations for a content-based automatic minimum size), a cyclic percentage—that is, a percentage value that would resolve against a containing block size which itself depends on that percentage—is resolved specially:

我们的框是图像，包含 block 是 inline-block div。图像是替换元素，因此我们需要按照 (b) 和 (c) 来识别最大内容贡献 和最小内容贡献

b. Likewise, if the box is replaced, then the entire value of any max size property or preferred size property specified as an expression containing a percentage that is cyclic is treated for the purpose of calculating the box’s max-content contributions only as that property’s initial value.

将 max-width/width 视为 auto 将使 max-content 贡献保持不变(在我们的例子中为 1000px)。将改变的是最小内容贡献:

c. If the box is replaced, a cyclic percentage in the value of any max size property or preferred size property (width/max-width/height/max-height), is resolved against zero when calculating the min-content contribution in the corresponding axis.

因此图像的最小内容贡献将变为 0 而不再是 1000px 这是基于其固有维度的初始最小内容贡献(相关:https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes ) 所有技巧都在这里!

现在我们的内联 block 是一个收缩以适应元素并且应用以下算法:

Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width). ^ref

图像的贡献将从 0 到 1000px 不等，因此浏览器将选择避免任何溢出的值(可用宽度 部分)并且不大于 1000px(min 部分)

如果不使用百分比，图像的最小内容为 1000px，因此浏览器必须使用 1000px 和 1000px 之间的值> 作为首选最小宽度，这将为 div 提供图像的固有尺寸宽度。

这一切只是div宽度的计算。在此之后，我们将计算出的宽度作为我们百分比值的引用。

我们也可以考虑不同的值，逻辑也是一样的:

div {
  border:2px solid red;
  margin:5px;
}

<div style="display:inline-block">
  <img src="https://via.placeholder.com/1000x100">
</div>

<div style="display:inline-block">
  <img src="https://via.placeholder.com/1000x100" style="max-width:80%">
</div>

<div style="display:inline-block">
  <img src="https://via.placeholder.com/1000x100" style="width:50%">
</div>

---

上述逻辑以相同的方式应用于您的代码，因为您的列设置为 auto，这意味着它的大小基于其内容并且也是图像的包含 block 。