滚动容器应使用 max-height 而非 height 实现局部滚动：max-height 设上限且允许收缩，需搭配 overflow-y: auto 才生效；height 会导致刚性撑死、溢出不滚动。
给滚动容器设 max-height 而不是 height
局部滚动失效，八成是因为直接写了 height: 300px——这会让容器“刚性撑死”，内容少时留白，内容多时溢出且不触发滚动。正确做法是用 max-height：它只设上限，容器仍可“收缩包裹”内容，超出才启用滚动。
常见错误：div { height: 400px; overflow-y: auto; } → 滚动条可能不出现，或内容被裁切；div { max-height: 400px; overflow-y: auto; } → 才真正生效。
-
max-height必须搭配overflow-y: auto或scroll，单写max-height不会自动加滚动条 - 百分比值（如
max-height: 80%）只在父容器有明确高度（非auto或min-height）时才有效 - Flex 容器里，若子项用了
flex: 1，max-height可能被忽略，需改用max-height: 0; flex: 1;再配合overflow
overflow 选 auto 还是 scroll？
overflow-y: auto 是默认推荐：内容未超限时隐藏滚动条，视觉干净；overflow-y: scroll 强制显示滚动条（哪怕没内容可滚），在 macOS 上会常驻细条，在 Windows 上则始终可见。
注意：overflow: hidden 会彻底裁掉溢出内容，不是“禁用滚动”，而是“不让滚也不显示滚动条”，容易误判为样式失效。
- 表单弹层、侧边栏等交互组件，优先用
auto，避免干扰用户注意力 - 需要滚动条始终存在以提示“此处可滚动”的场景（如设计稿预览区），才用
scroll -
overflow-x: hidden常配合使用，防止横向滚动条意外出现（尤其含长单词或未断行文本时）
绝对定位容器怎么设最大高度？
绝对定位元素（position: absolute）脱离文档流，其子元素无法继承父高上下文，直接写 max-height: 100% 会失效——因为百分比高度需要一个“已知高度的包含块”，而 absolute 父级通常没有。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
解法是让容器自己成为 Flex 主轴，并显式约束内容区：
.popup {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
max-height: 70vh; /* ✅ 直接用视口单位或固定值 */
}
.popup-header { flex-shrink: 0; }
.popup-body {
flex: 1;
overflow-y: auto;
max-height: 0; /* ✅ 配合 flex: 1，确保高度由 flex 分配而非内容撑开 */
}
- 避免对
absolute元素用height: 100%，它依赖祖先的height，极易断链 - 用
vh、rem或像素值更可靠；若需响应式，可用clamp(200px, 60vh, 500px) - 如果内部是表格，别给
table设max-height——它无效，必须包一层div并对其设max-height
滚动区域内容太少时，怎么防止 max-height 白占空间？
当内容高度远小于 max-height，容器仍会按 max-height 预留空白，UI 显得松散。这不是 bug，是 CSS 的预期行为——max-height 是上限，不是目标高度。
要“内容多就滚，内容少就缩”，关键靠布局模式配合：
- 用
display: grid或flex替代纯块流，让容器高度由子项自然决定，max-height仅作兜底 - 避免给滚动容器设
padding后再设max-height——padding 会算进高度，导致可用滚动空间变小；改用子元素内边距 - 移动端 Safari 对
max-height+overflow的渲染偶有延迟，可加will-change: scroll-position提前提示
最易被忽略的一点：所有这些限制都依赖于容器有明确的“块格式化上下文”，也就是不能是 float 或 inline 元素——务必确认父级是 block 或 flex/grid 容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
