<section>默认不滚动，因其是语义化块级元素，宽高由内容撑开，无尺寸限制则无法触发溢出滚动机制；必须配合固定高度或max-height及overflow属性才生效。
用 <section> 做容器本身不会触发滚动，必须配合固定尺寸 + overflow 才能生效。
为什么 <section> 默认不滚动
<section> 是语义化块级元素，和 <div> 一样默认宽高由内容撑开，没有滚动能力。浏览器只对“有明确尺寸限制且内容溢出”的容器启用滚动机制。
- 直接给
<section>加overflow: auto但不设height或max-height→ 无效 - 用
min-height替代height→ 滚动条可能不出现（内容少时高度仍自适应） - 父容器用了
display: flex且未设flex-shrink: 0→ 子<section>可能被压缩，需额外控制
overflow-y: auto 和 overflow: scroll 的实际差异
两者都让容器支持垂直滚动，但行为不同：
-
overflow-y: auto：仅当内容实际超出高度时才显示滚动条，更节省空间 -
overflow: scroll：无论是否溢出，始终显示滚动条（含占位空白），iOS Safari 下可能强制显示灰色不可拖动条 - 若要隐藏滚动条但保留滚动功能，得用
::-webkit-scrollbar { display: none; }，且仅对 WebKit 内核有效
滚动区域内容换行导致布局错乱怎么办
当 <section> 里放了多个 <p> 或 <div>，默认会垂直堆叠；但如果子元素是 inline 级（如 <span>、<img>），容易因空格或换行符产生意外间隙，影响滚动体验。
立即学习“前端免费学习笔记（深入）”；
- 加
white-space: nowrap是为横向滚动准备的，用在垂直滚动区域反而会让文字不折行、撑宽容器 - 正确做法是确保子元素块级化：
display: block或保持默认，再用margin/padding控制间距 - 如果子元素用了
float或flex，记得清除浮动或设align-items: flex-start，否则scrollHeight计算可能不准
Vue/React 中动态渲染后滚动失效的常见原因
框架下 <section> 内容常由数据驱动，DOM 渲染完成前就读取 scrollHeight 或调用 scrollIntoView，会导致定位偏移或无反应。
- Vue 里不能只靠
mounted，得等 DOM 更新完毕：this.$nextTick(() => { /* 滚动逻辑 */ }) - React 函数组件要用
useEffect并依赖渲染后的 ref：useEffect(() => { containerRef.current?.scrollTo(0, 0); }, [data]); - 如果内容高度随屏幕缩放变化（比如用了
rem或vh），记得监听resize事件重新计算
真正卡住人的往往不是怎么写 CSS，而是没意识到 <section> 只是语义标签，滚动能力全靠尺寸约束和 overflow 组合；一旦内容动态加载或响应式变化，就得补上时机控制和边界判断。
