用 max-height 限制容器最大高度最可靠，但必须配合 overflow 才生效；overflow: hidden 裁剪内容，auto 按需显示滚动条，scroll 强制显示；常见失效原因包括 flex 布局拉伸、子元素 height/ min-height 百分比、浮动或绝对定位干扰及 CSS 优先级冲突；移动端需加 -webkit-overflow-scrolling: touch 优化 iOS 滚动体验。
容器高度随内容撑开，但想限制最大高度
直接用 max-height 是最常用也最可靠的方式。它不会影响正常内容较小时的自适应行为，只在内容超出阈值时起作用。关键点在于：必须配合 overflow 才能生效——否则即使设了 max-height，溢出内容仍会突破容器、破坏布局。
overflow 设置成 hidden 还是 auto？
选哪个取决于交互需求：
-
overflow: hidden：简单粗暴，超出部分直接裁剪，不提供滚动能力；适合卡片摘要、标签云等无需用户查看全部内容的场景 -
overflow: auto：仅当内容真正溢出时才显示滚动条（Chrome/Firefox 下为overflow-y: auto更精准），用户体验更友好；适合日志预览、评论列表等需可读性的容器 -
overflow: scroll：强制显示滚动条（哪怕没溢出），容易干扰视觉，一般不推荐
为什么设置了 max-height 还是没限制住？
常见原因有这几个：
- 父容器用了
display: flex且没设align-items: flex-start或类似约束，子元素可能被拉伸，覆盖max-height - 内部元素用了
height: 100%或min-height: 100%，强行撑高容器 - 存在浮动元素未清除，或使用了
position: absolute的子元素脱离文档流，导致高度计算失效 - CSS 优先级问题：其他规则（比如来自框架的
!important）覆盖了你的max-height
移动端滚动体验差？加点优化
在 iOS Safari 和部分安卓 WebView 中，overflow: auto 容器默认不支持弹性滚动（即“滑过头再回弹”）。需要手动启用：
立即学习“前端免费学习笔记（深入）”；
container {
max-height: 200px;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* 关键 */
}注意：-webkit-overflow-scrolling: touch 已被标记为非标准，但目前仍是解决 iOS 滚动卡顿最有效的手段。如果项目要求严格遵循标准，需搭配 JS 滚动库（如 smooth-scrollbar），但代价是体积和复杂度上升。
