嘿，这个问题其实很好解决——你用错函数啦！max()确实不适合这个场景，CSS Grid里专门有个minmax()函数就是用来处理这种「最小尺寸+自动适应内容」的需求的。

正确的代码实现 #

你只需要把原来的max(auto, 100vh)换成minmax(100vh, auto)就行：

.grid-container {
  display: grid;
  grid-template-rows: repeat(10, minmax(100vh, auto));
}

原理说明 #

• minmax(100vh, auto)的意思是：每行的最小高度是100vh，保证即使内容很少，行也会占满整个视口高度；
• 当单元格内的文本内容超过100vh时，auto会让行高自动扩展，完全容纳溢出的内容，不会出现截断或者滚动的问题（除非你额外添加了overflow属性）。

之前用max()无效的原因是：在Grid轨道尺寸的定义中，max()的参数需要是可计算的固定/相对长度值，auto在这里不属于合法参数类型，而minmax()正是Grid布局为这种动态尺寸场景量身打造的工具。

内容的提问来源于stack exchange，提问作者wolfgang29