ol元素本身不支持滚动，必须用div等块级容器包裹并设置max-height和overflow-y: auto才能触发滚动；直接样式化ol不可靠，且需确保高度约束未被父级Flex布局或min-height等破坏。
ol元素本身不支持滚动，必须用容器包裹
HTML的<ol>标签只是语义化列表容器，它没有内置滚动能力。想出现滚动条，得把它放进一个有固定高度、且设置overflow: auto或overflow-y: scroll的块级容器里——这是最常被忽略的前提。
常见错误是直接给<ol>加height和overflow，但<ol>默认是display: block，能设高，可一旦子元素（<li>）撑开，滚动行为仍不可靠，尤其在不同浏览器中表现不一致。
实操建议：
- 用
<div class="list-container">包住<ol>，而不是尝试样式化<ol>本身 - 给容器设
max-height（比height更稳妥，避免内容少时留白） - 加
overflow-y: auto，这样内容超长才出滚动条，不冗余 - 别忘了
scrollbar-width（Firefox）和::-webkit-scrollbar（Chrome/Safari）如需自定义样式
滚动区域必须有明确高度限制，否则overflow无效
CSS的overflow属性对“无高度约束”的元素不起作用。如果父容器高度由内容撑开，overflow-y: scroll就形同虚设——滚动条永远不会出现。
立即学习“前端免费学习笔记（深入）”；
典型场景：把<ol>放在flex布局的子项里，却没给该子项设height或max-height；或者容器用了min-height但没配height，导致计算不出滚动触发点。
实操建议：
- 容器高度优先用
max-height: 200px（具体值按需），比height更灵活 - 若在Flex容器中，确保该子项设了
flex-shrink: 1并配合max-height，否则可能强行撑高父容器 - 用DevTools检查元素实际渲染高度，确认是否真被截断——有时候看似超长，其实是
padding或margin干扰了视觉判断
IE11及旧版浏览器下ol滚动需额外注意兼容性
IE11对flex + overflow组合的支持有问题：如果<ol>是Flex子项，又设了max-height，滚动条可能不响应鼠标滚轮，或首次渲染不显示。
这不是<ol>的问题，而是IE对弹性盒子内部溢出处理的bug。现代浏览器（Chrome/Firefox/Edge 79+）基本无此问题。
实操建议：
- 避免在IE11中让
<ol>直接作为display: flex容器的直系子元素；中间加一层<div>包裹再设max-height - 测试时用真实IE11环境（不是Edge的IE模式），后者模拟不完全
- 如果必须支持，可加
-ms-overflow-style: scrollbar强制显示滚动条（仅IE）
真正卡住人的往往不是怎么写CSS，而是没意识到<ol>必须被“框住”才能滚动——它自己不会主动裁剪内容。容器的高度限制是否生效、是否被父级布局意外释放，才是调试时最该盯住的点。
