max-height用于限制元素最大高度，内容超出时需配合overflow控制溢出；在flex布局中可能因拉伸失效，需调整对齐方式；动画中常用大值max-height模拟展开效果。
在CSS中，max-height 用于设置元素的最大高度。当内容的实际高度小于或等于 max-height 时，它不会产生明显效果；但一旦内容试图超出这个最大值，max-height 就会起作用，限制元素不能再继续变高。
max-height 的基本行为
max-height 只是一个上限约束，它不会强制元素达到某个高度，而是防止其超过设定值。它的优先级高于 height，但低于 min-height（即 min-height > max-height 时，以 min-height 为准）。
常见用法示例：
.container {
max-height: 200px;
overflow: hidden; /* 或 scroll、auto */
}
在这个例子中，.container 的高度最多只能是 200px。如果内容较少，高度会更小；如果内容较多，高度也不会超过 200px，多出的部分将被裁剪（若未设置 overflow）或出现滚动条。
立即学习“前端免费学习笔记（深入）”；
与 overflow 配合使用
max-height 要想真正“生效”，通常需要配合 overflow 属性来处理溢出内容：
- overflow: hidden：超出部分不可见
- overflow: scroll：始终显示滚动条
- overflow: auto：仅当内容溢出时显示滚动条
例如，在一个可折叠的面板或弹窗中，常使用以下组合：
.panel {
max-height: 300px;
overflow-y: auto;
}
这样既能控制最大高度，又能保证用户可以滚动查看全部内容。
在 Flex 或 Grid 布局中的表现
在弹性布局（Flexbox）中，子元素默认会拉伸以适应容器。此时即使设置了 max-height，也可能因为父容器的 stretch 行为而失效。
解决方法是给子元素添加 align-self: flex-start 或确保父容器不强制拉伸：
.flex-container {
display: flex;
align-items: flex-start; /* 防止子项被拉伸 */
}
.flex-item {
max-height: 150px;
overflow: auto;
}
动画和过渡中的 max-height
有时开发者希望用 max-height 实现展开/收起动画（如手风琴菜单），但由于 height 或 max-height 从 0 到 auto 无法直接过渡，常见的技巧是：
- 用 max-height: 0 → max-height: 500px 模拟展开
- 配合 transition 实现视觉动画
注意：不能设为 height: auto 并过渡，因此这种方案依赖一个足够大的 max-height 值（比如 999px），确保容纳所有内容。
基本上就这些。max-height 是否生效，取决于内容是否尝试突破限制，以及是否有合适的 overflow 和布局上下文支持。理解它的限制条件，才能正确控制元素高度。不复杂但容易忽略细节。
