局部滚动容器不能仅靠min-height触发滚动，必须同时设置height或max-height并满足overflow条件；flex子项需加flex-shrink:0；移动端须配viewport和-webkit-overflow-scrolling:touch。

局部滚动容器不能只靠 min-height 来“触发滚动”——它根本不会生效，除非你同时满足高度约束和 overflow 条件。

为什么 min-height 在局部滚动里基本没用

浏览器只对有明确滚动上下文的容器启用 scrollTop 和滚动条渲染。而 min-height 只表示“至少多高”，不定义“最多显示多少”，所以即使写了 min-height: 200px; overflow-y: auto;，只要容器实际高度没被撑满或受限，滚动行为就不可靠。

• min-height 不会创建滚动上下文，height 或 max-height 才会
• 父元素是 flex 布局时，若没加 flex-shrink: 0，子容器可能被压缩到 0 高度，min-height 完全失效
• 在 border-collapse: collapse 表格中，min-height 对 tr 无效，必须作用于 td

height + min-height 组合才是稳妥写法

真正可控的做法是：用 height 锚定滚动区域可视高度，再用 min-height 设下限防内容过少时塌陷。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 推荐写法：.scroll-container { height: 300px; min-height: 200px; overflow-y: auto; }
• 单位优先选 px、vh 或 rem；避免用 %，除非父级有明确 height
• 如果容器是 Flex 子项，务必加 flex-shrink: 0，否则高度会被压缩
• 移动端必须配 -webkit-overflow-scrolling: touch，否则 iOS 滚动卡顿或不响应

手机上局部滚动失效？先查 viewport 和定位

90% 的移动端局部滚动失败，不是 CSS 写错，而是基础环境没配对。

立即学习“前端免费学习笔记（深入）”；

• <meta name="viewport" content="width=device-width, initial-scale=1.0"> 必须完整存在，漏掉 initial-scale=1.0 就会导致 touch 坐标偏移、“点得中、滑不动”
• -webkit-overflow-scrolling: touch 只对 position: relative、absolute 或 fixed 容器生效，static 下会被忽略
• 别和 transform: translateZ(0) 或 will-change: transform 同时用，iOS 16+ 会触发渲染层分裂，反而更卡
• 有 border-radius 时，记得加 overflow: hidden，否则圆角内内容溢出

最常被跳过的检查点：容器父级是否用了 align-items: center 或 justify-content: center ——这类 flex 居中会干扰高度计算，让 height 失效，min-height 更无从谈起。