我在React应用程序上遇到了各种小故障，奇怪的渲染工件等等，并且想知道从浏览器的角度定义维度的工作方式。

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

正如我所理解的，网格模板列中的值auto定义了要调整大小以适应其内容的列。

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

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

示例

null

.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>

null