html - 列何时缩小到其最大值以下？

Question

第一列设置为 minmax(200px, 400px) .我知道它会尝试并始终保持 400 像素“当它可以”时，当它必须缩小到最大时，它可以缩小到 200 像素。

当我开始使视口(viewport)变得非常小时，它确实会缩小到 400 像素以下。我的问题是什么决定了它何时缩小到 400 像素以下？

.grid-container {
  display: grid;
  grid-template-columns: minmax(200px, 400px) 1fr 1fr;
}

.grid-container > div:nth-child(1) {
  background-color: red;
}

.grid-container > div:nth-child(2) {
  background-color: orchid;
}
.grid-container > div:nth-child(3) {
  background-color: yellowgreen;
}

<div class="grid-container">
  <div>I am column 1</div>
  <div>I am column 2</div>
  <div>I am column 3</div>
</div>

Answer 1

1fr 有一个最小宽度，即内容的宽度。如果内容具有固定宽度，则为最小值。如果内容是文本，则最小值是最长单词的宽度(在本例中为单词“列”)。所以在这里你的第一列将开始缩小到 400px 以下，当两个 1fr 列都达到它们的最小宽度并且视口(viewport)的宽度开始低于
(400px + 第 2 列最小宽度 + 第 3 列最小宽度)