浏览器无法将相对单位（百分比）应用到由 fr 设置的空间

Question

问题详情

我写了这样的代码。在这里，形象应该是由保留的空间传播fr，因为width，height和object-fit性质的工作。所以我认为第二个的文字.item会溢出。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  background: red;
  gap: 10px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="container">
  <div class="item">
    <img src="https://unsplash.it/450/450">
  </div>
  <div class="item">
    <img src="https://unsplash.it/450/450">
    text
  </div>
</div>

在 Firefox 中，这会导致文本用完，

Chrome 并非如此。

此外，将图像包装在div元素中而不是仅在网格项下方将解决该问题。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  background: red;
  gap: 10px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="container">
  <div class="item">
    <div class="content">
      <img src="https://unsplash.it/450/450">
    </div>
  </div>
  <div class="item">
    <div class="content">
      <img src="https://unsplash.it/450/450">
      text
    </div>
  </div>
</div>

不相关但相似的文章

我发现了一个可能相关的问题，但我认为这个问题与我的问题无关，因为此问题文本的源代码在 Firefox 和 Chrome 中正常工作。

• Chrome / Safari 未填充 100% 的 flex 父级高度
• Chrome 和 Firefox 中的高度渲染方式不同
• 在 flexbox 中使用“高度：100%”和“对齐项目：拉伸”
• 为什么我的 Grid 元素的高度没有正确计算？

不相关但相似的错误

我还查找了相关的错误票证，但这些票证已经声明已修复，可能与我的问题无关。

• https://bugs.chromium.org/p/chromium/issues/detail?id=426898
• https://github.com/philipwalton/flexbugs/issues/197

问题

1. 这种差异是没有错误票证或未定义行为的错误吗？

2. 如果这不是未定义的行为，那么哪个是正确的行为？

Answer 1

\n

如果这不是未定义的行为，那么哪一个是正确的行为？

\n

\n\n

我想说，Firefox 在这里做得正确，而 Chrome 则正确了一半。

\n\n

首先，您可以将代码减少为以下内容，因为grid-template-rows: 1fr不需要具有该行为

\n\n

\r\n

\r\n

.container {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  background: red;\r\n  gap: 10px;\r\n}\r\n\r\nimg {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n}

\r\n

<div class="container">\r\n  <div class="item">\r\n    <img src="https://unsplash.it/450/450">\r\n  </div>\r\n  <div class="item">\r\n    <img src="https://unsplash.it/450/450">\r\n    text\r\n  </div>\r\n</div>

\r\n

\r\n

\r\n

\n\n

然后你可以使用任何百分比值（小于或大于 100%），你会看到 chrome 在我们有文本的第二种情况下不会执行任何操作：

\n\n

\r\n

\r\n

.container {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  background: red;\r\n  gap: 10px;\r\n}\r\n\r\nimg {\r\n  width: 100%;\r\n  height: 50%;\r\n  object-fit: cover;\r\n}

\r\n

<div class="container">\r\n  <div class="item">\r\n    <img src="https://unsplash.it/450/450">\r\n  </div>\r\n  <div class="item">\r\n    <img src="https://unsplash.it/450/450">\r\n    text\r\n  </div>\r\n</div>

\r\n

\r\n

\r\n

\n\n

正如我在这里所解释的，您面临着百分比高度的特定行为。默认情况下，百分比高度是相对于包含块的显式高度，在我们的例子中，我们没有为行设置任何显式高度（1fr 不是显式的）。考虑到 CSS2 规范，我们不应该auto

\n\n

\n

指定百分比高度。百分比是根据生成的盒子的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且该元素未绝对定位，则该值计算为“auto”。 ^参考

\n

\n\n

Chrome 正在对第二张图片执行此操作。它认为高度并不是auto完全错误的。

\n\n

在 CSS3 规范中，我们还有另一个部分可以让浏览器做更多的工作：

\n\n

\n

有时，包含块的百分比大小的框\xe2\x80\x99s 的大小取决于框本身的内在大小贡献，从而创建循环依赖性。在计算此类框的固有大小贡献时（包括基于内容的自动最小大小的任何计算），循环百分比\xe2\x80\x94，即，将根据包含块大小解析的百分比值，该包含块大小本身取决于该百分比\xe2\x80\x94 已专门解决：^ref

\n

\n\n

然后你就有了一组复杂的规则，其中两个重要的部分是：

\n\n

\n

否则，将根据包含块\xe2\x80\x99s 的大小解析百分比。（包含块\xe2\x80\x99s 的大小不会根据框的结果大小重新解析；因此内容可能会溢出或下溢包含块）。

\n

\n\n

还有一条带有注释的规则：

\n\n

\n

注意：在这种情况下，网格项目和弹性项目确实允许解析百分比。

\n

\n\n\n\n

为了方便起见，浏览器会首先忽略百分比高度，根据内容计算每个网格轨道的高度，得到如下：

\n\n

\r\n

\r\n

.container {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  background: red;\r\n  gap: 10px;\r\n}\r\n\r\nimg {\r\n  width: 100%;\r\n  /*height: 100%;*/\r\n  object-fit: cover;\r\n}

\r\n

<div class="container">\r\n  <div class="item">\r\n    <img src="https://unsplash.it/450/450">\r\n  </div>\r\n  <div class="item">\r\n    <img src="https://unsplash.it/450/450">\r\n    text\r\n  </div>\r\n</div>

\r\n

\r\n

\r\n

\n\n

然后考虑到之前计算的网格轨道高度，我们解析百分比高度以获得以下结果，并且我们不会再次重新计算轨道的高度：

\n\n

\r\n

\r\n

.container {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  background: red;\r\n  gap: 10px;\r\n}\r\n\r\nimg {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n}

\r\n

<div class="container">\r\n  <div class="item">\r\n    <img src="https://unsplash.it/450/450">\r\n  </div>\r\n  <div class="item">\r\n    <img src="https://unsplash.it/450/450">\r\n    text\r\n  </div>\r\n</div>

\r\n

\r\n

\r\n

\n\n

从逻辑上讲，文本将溢出，因为高度是由图像+文本定义的，我们告诉图像采用所有高度，使文本位于外部并使图像填充所有空间。

\n\n

使用任何百分比值都会给出相同的结果，即使图像达到图像+文本定义的高度的 X%。

\n\n\n\n

设置明确的高度将使两者的行为相同，因为我们没有复杂的计算，并且我们可以依赖规范的 CSS2 部分：

\n\n

\r\n

\r\n

.container {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  grid-template-rows:200px;\r\n  background: red;\r\n  gap: 10px;\r\n}\r\n\r\nimg {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n}

\r\n

<div class="container">\r\n  <div class="item">\r\n    <img src="https://unsplash.it/450/450">\r\n  </div>\r\n  <div class="item">\r\n    <img src="https://unsplash.it/450/450">\r\n    text\r\n  </div>\r\n</div>

\r\n

\r\n

\r\n

\n\n

添加额外的包装器将使高度auto在所有情况下都失败，因为浏览器处理这种情况变得更加复杂^{1 。}

\n\n

\r\n

\r\n

.container {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  background: red;\r\n  gap: 10px;\r\n}\r\n\r\nimg {\r\n  width: 100%;\r\n  height: 958%;\r\n  object-fit: cover;\r\n}

\r\n

<div class="container">\r\n  <div class="item">\r\n    <div>\r\n      <img src="https://unsplash.it/450/450">\r\n    </div>\r\n  </div>\r\n  <div class="item">\r\n    <div>\r\n      <img src="https://unsplash.it/450/450">\r\n    </div>\r\n    text\r\n  </div>\r\n</div>

\r\n

\r\n

\r\n

\n\n

添加height:100%额外的包装器将回到之前的情况，并且可以再次解析高度：

\n\n

\r\n

\r\n

.container {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  background: red;\r\n  gap: 10px;\r\n}\r\n\r\nimg {\r\n  width: 100%;\r\n  height: 50%;\r\n  object-fit: cover;\r\n}\r\n\r\n.item>div {\r\n  height: 100%;\r\n}

\r\n

<div class="container">\r\n  <div class="item">\r\n    <div>\r\n      <img src="https://unsplash.it/450/450">\r\n    </div>\r\n  </div>\r\n  <div class="item">\r\n    <div>\r\n      <img src="https://unsplash.it/450/450">\r\n    </div>\r\n    text\r\n  </div>\r\n</div>

\r\n

\r\n

\r\n

\n\n

在这种情况下，div 的高度由图像+文本定义（文本将溢出），然后 div 内的图像将占据该高度的一半。

\n\n

\n\n

类似情况的相关问题：

\n\n

/sf/answers/3649657651/

\n\n

Chrome / Firefox CSS 网格中的百分比高度差异

\n\n

无高度的网格间隙百分比

\n\n

_{1：我无法给出确切的部分来解释为什么我们无法解决这种情况。}

\n