如果我们在CSS网格中有更多列,为什么内容大小不同？

Question

为什么这样:

div {
  width: 200px;
  display: grid;
  grid: "first second" / 1fr 1fr;
  background-color: #ccc;
  padding: 8px;
}

#first {
  grid-area: first;
}

#second {
  grid-area: second;
}

<div>
  <input id="first" />
  <input id="second" />
</div>

与此不同的是:

div {
  width: 200px;
  display: grid;
  grid: "first first second second" / 1fr 1fr 1fr 1fr;
  background-color: #ccc;
  padding: 8px;
}

#first {
  grid-area: first;
}

#second {
  grid-area: second;
}

<div>
  <input id="first" />
  <input id="second" />
</div>

请注意,我唯一改变的是列数和每个输入占用的区域.

Answer 1

这是规范以及如何1fr解释的问题。

来自W3C 错误/问题报告

“问题”是1fr解析为minmax(auto, 1fr)，这意味着我们需要在解析 1fr 轨道的大小之前知道（父轨道）的大小（因为最小轨道大小调整函数是内容大小的，它是自动的）。

作者 POV 有一个快速解决此问题的方法，只需将 1fr 替换为 minmax(0px, 1fr) 即可。

..或者在这种情况下只需设置min-width:0子元素。