你想要 minmax(10px, 1fr) 而不是 1fr

网络上有很多这样的网格

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

我的意思是，它们实际上应该是

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(10px, 1fr));
}

为什么？在前面，网格列的最小宽度为 min-content，它可能比你想要的要宽（参见：网格溢出）。在后面，你已将最小值减至 10px（不是零，因此它不会消失，从而导致更多混乱）。

虽然有必要这样做有点不幸，但这样做会导致更可预测的行为并避免头痛。

就是这样。这就是我的全部信息。

（博客文章格式来自 Kilian 的 “你想要 overflow: auto，而不是 overflow: scroll”，这也是正确的。）