我们需要minmax重复吗？

Question

我不明白repeat(N, 1fr)和repeat(N, minmax(0, 1fr))之间的区别。

它们都起作用，到目前为止，我不明白为什么前者可能会导致问题。

参见https://css-tricks.com/you-want-minmax10px-1fr-not-1fr/

它不会消失在你身上并导致更多的混乱

他想说的是什么情况？似乎后者导致了更多的混乱，而不是前者。

Answer 1

当没有足够的可用空间使每个分数至少达到最大项的大小时，minmax(0,1fr)会确保子级而不是父级中的内容溢出。

​

.nomin,.min{
  display: grid;
  grid-template-columns: 1fr;
  height: 8rem;
  background-color: #eee;
  border: #aaa solid;
  margin-bottom: 3rem;
  gap: .1rem;
}

.nomin>div,.min>div{
  background-color: #ccc;
}

.nomin {
  grid-template-rows: repeat(3,1fr);
}

.min {
  grid-template-rows: repeat(3,minmax(0,1fr));
}

<div class="nomin">
  <div>
    no minmax
  </div>
  <div>
    <textarea>evil element</textarea>
  </div>
  <div>
    text
  </div>
</div>

<div class="min">
  <div>
    minmax
  </div>
  <div>
    <textarea>evil element</textarea>
  </div>
  <div>
    text
  </div>
</div>

​