CSS中minmax()忽略最小值，子div拉伸适配父级高度问题求助

你猜的完全正确！问题根源就在body的Grid布局给#content分配的最小高度，再加上Grid默认的拉伸对齐行为，才导致内部的div被强制拉满高度，无视了minmax()里的最小值设置。

问题拆解 #

• 父容器的强制高度：body的Grid行中，cont区域用了minmax(calc(100vh - 150px), auto)，这意味着这个区域至少会占据视口高度减去150px的空间——哪怕#content里的内容根本不需要这么高。
• 默认的拉伸对齐：Grid布局的align-items默认值是stretch，所以#content会被自动拉伸，填满body给它分配的整个最小高度。
• 内部行被强制分配空间：当#content本身有了固定的最小高度后，它内部的Grid行repeat(3, minmax(70px, auto))就会被强制分配整个容器的高度，自然就忽略了原本设置的最小高度，把剩余空间都填满。

解决方案（两种可选） #

方案一：让#content只适配自身内容高度

如果不需要#content占据整个视口剩余高度，只需要它随内容自适应，那么给#content添加align-self: start，让它在body的Grid行里只占自身需要的高度：

#content{
  grid-area: cont;
  width: 80%;
  margin: 70px auto;
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: repeat(3, minmax(70px, auto));
  grid-template-areas: "header header" "body panel" "verlauf verlauf";
  grid-gap: 2em;
  /* 关键：让#content不再拉伸填满父容器高度 */
  align-self: start;
}

这样修改后，#content的高度完全由内部内容决定，内部的每个div都会遵守minmax(70px, auto)：内容不足时保持70px，内容超出时自动增高。

方案二：保留#content的最小高度，但让内部元素不被拉伸

如果需要#content始终保持至少calc(100vh - 150px)的高度，但内部的div还是要保持最小70px的初始高度，那么修改#content的内部对齐方式：

#content{
  /* 其他原有样式不变 */
  align-items: start;
}

align-items: start会让#content里的每个Grid子元素从行顶部开始排列，不再被拉伸填满行高。这样每个div的高度就会遵循minmax(70px, auto)的规则，同时#content本身还是会保持body设置的最小高度，剩余空间会留空在容器底部。

验证效果 #

两种方案都能实现你预期的效果：所有div初始高度为70px（你描述里写的75px应该是笔误？），内容填充时自动增高，否则保持最小高度。

内容的提问来源于stack exchange，提问作者xDw.Co