当孩子取决于父母，而父母取决于孩子时，浏览器如何计算宽度 [英] How do browsers calculate width when child depends on parent, and parent's depends on child's

问题描述

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

I'm experiencing various glitches, weird rendering artifacts and so forth on my React application and was wondering about the way defining dimensions works from a browser's point of view.

假设我有一个网格显示，还有一个 div ，其中有 grid-template-columns：1fr auto 1fr 和一个孩子 div 的跨度为 grid-column：2/3 -换句话说，跨度为 auto 父网格的区域。

Let's say I have a grid display, and there's a div which has grid-template-columns: 1fr auto 1fr and a child div which has spans grid-column: 2 / 3 - in other words spanning in the auto area of the parent grid.

据我了解，网格模板列中的值 auto 定义了

As I understand, the value auto in grid template columns defines the column to be sized to fit its contents.

现在，让我们添加 img 和 max-width 设置为 100％-换句话说，我们不想超出父容器的大小。

Now let's add an img with the max-width set to 100% - in other words, we don't want to exceed the size of the parent container.

但是，父容器的宽度由 auto 规则确定-那么浏览器如何让孩子知道占据100％的宽度？

However, the parent container's width is determined by the auto rule - so how can the browser let the child know to take up 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>

推荐答案

为了说明这一点，我将以一个更简化的示例开始，该示例将产生相同的输出：

To explain this, I will start with a more simplified example that will produce the same output:

<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">
  <img src="https://via.placeholder.com/1000x100" style="width:100%">
</div>

我们有一个 inline-block 元素，因此其宽度取决于其内容和 max-width：100％（或 width：100％）会给我们带来奇怪的结果。

We have an inline-block element so its width depend on its content and the use of max-width:100% (or width:100%) will give us the strange result.

要了解这一点，我们需要参考规范，更确切地说是百分比调整部分，我们可以阅读：

To udnerstand this, we need to refer to the specification and more precisely Percentage Sizing section where we can read:

有时，一个百分比大小的盒子包含的块的大小取决于盒子本身的内在大小贡献，从而创建了一个循环依赖性。在计算此类框的内在尺寸贡献时（包括对基于内容的自动最小尺寸的任何计算），是一个循环百分比，即可以根据本身取决于该百分比的包含块大小来解析的百分比值。专门解决：

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）来识别最大含量贡献和最小含量贡献

Our box is the image and the containing block is the inline-block div. The image is a replaced element so we need to follow the (b) and (c) to identify the max-content contribution and the min-content contribution

b。同样，如果替换了该框，则将处理指定为包含循环百分比的表达式的任何最大尺寸属性或首选尺寸属性的整个值，以计算该框的最大含量贡献仅作为该属性的初始值。

考虑最大宽度 / width 为自动将使最大内容贡献保持不变（在我们的示例中为 1000px ）。最小含量的贡献将发生变化：

Considering max-width/width as auto will keep the max-content contribution the same (1000px in our case). What will change is the min-content contribution:

c。如果替换了该框，则在计算以下项中的最小含量贡献时，将最大尺寸属性或首选尺寸属性（宽度/最大宽度/高度/高度/最大高度）的值的循环百分比解析为零。 。

因此图像的最小内容贡献将变为 0 ，再也没有 1000px 了，这是基于其内在维度的初始最小含量贡献（相关： https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes ）和所有

So the min-content contribution of the image will become 0 and no more 1000px which was the initial min-content contribution based on its intrinsic dimension (related: https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes) and all the trick is here!

现在，我们的内联块是缩小至适合的元素，并且应用以下算法：

Now our inline-block is a shrink-to-fit element and the following algorithm apply:

然后缩小为适合宽度为： min（max（max（preferred最小宽度，可用宽度），preferred宽度）。 ^参考

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

图片的贡献范围从 0 到 1000px ，因此浏览器将选择一个值，该值将避免溢出（可用宽度部分）并且不大于 1000px （ em> min 部分）

the contribution of the image will vary from 0 to 1000px so the browser will pick the value that will avoid any overflow (the available width part) and not bigger than 1000px (the min part)

如果不使用百分比，则图像的最小内容为 1000px ，因此浏览器必须使用 1000px 和 1000px 之间的值作为首选最小宽度，

Without the use of percentage the min-content of the image was 1000px so the browser is obliged to use a value between 1000px and 1000px as preferred minimum width which will give the div the intrinsic size width of the image.

所有这些仅是div宽度的计算。此后，我们将计算的宽度作为百分比值的参考。

All this is only the calculation of the div width. After this, we consider the calculted width as a reference for our percentage value.

我们还可以考虑不同的值，并且逻辑将相同：

We can also consider different value and the logic will be the same:

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 ，这意味着其大小基于其内容，并且也是图像的包含块。

The above logic apply the same way to your code since your column is set to auto which means that its size is based on its content and is also the containing block of the image.

这篇关于当孩子取决于父母，而父母取决于孩子时，浏览器如何计算宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！