CSS如何实现父容器高度取固定px与子内容高的较大值并满足max-height限制

实现方案 #

你设想的height: max(400px, max-content)写法是可行的，也可以用min-height+fit-content的组合实现，兼容性更友好。
你原代码的问题是给父容器设置了固定height: 400px，相当于把父容器高度写死，无法跟随子元素内容自动撑开，调整CSS即可满足所有需求：

方案1（兼容性更好）

.parent {
  /* 最小高度400px，保证内容不足400px时父容器高度不小于该值 */
  min-height: 400px;
  /* 高度默认适配子内容高度 */
  height: fit-content;
  /* 最大高度限制为80vh */
  max-height: 80vh;
  width: 80%;
  margin: 100px auto;
  border: solid 5px black;
  /* 超出才显示滚动条，未超出时不显示冗余滚动条 */
  overflow: auto;
  /* 可选：如果要把边框算入高度阈值，加这一行 */
  box-sizing: border-box;
}

方案2（你预想的max写法，效果完全一致）

.parent {
  height: max(400px, max-content);
  max-height: 80vh;
  width: 80%;
  margin: 100px auto;
  border: solid 5px black;
  overflow: auto;
  box-sizing: border-box;
}

效果验证 #

你可以修改子元素高度测试所有场景：

• 子元素高度 < 400px：父容器高度固定为400px
• 400px < 子元素高度 < 80vh：父容器高度跟随子元素同步增长，无滚动条
• 子元素高度 > 80vh：父容器高度固定为80vh，内容区域出现滚动条
  完全满足你列出的全部4项要求。

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