child依赖parent，parent依赖child，浏览器如何计算宽度

Question

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

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

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

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

然而，parent 容器的宽度是由 auto 规则决定的 - 那么浏览器如何让 child 知道占用 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:

我们的框是图像，包含块是 inline-block div。图像是替换元素，因此我们需要按照 (b) 和 (c) 来识别 max-content 贡献 和 min-content贡献

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 视为自动将使 max-content 贡献保持不变（1000px 在我们的例子中）。将改变的是 min-content 贡献：

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.

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

现在我们的 inline-block 是一个 shrink-to-fit 元素并且应用以下算法：

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

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

如果不使用百分比，图像的 min-content 为 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，这意味着它的大小基于其内容，也是图像的包含块。

child依赖parent，parent依赖child，浏览器如何计算宽度

How do browsers calculate width when child depends on parent, and parent's depends on child's

html

css

width

css-grid