必须显式设置宽高（如height: 200px或max-height）并配合overflow: auto才能触发滚动；仅设min-height、flex: 1或不设尺寸时，浏览器不判定溢出，滚动无效。
直接给容器设固定尺寸 + overflow: auto，别碰 <marquee></marquee> —— 它在 Chrome/Firefox/Edge 里已不渲染，Safari 直接忽略，控制台还会报 Deprecated API usage。
容器必须有明确宽高才能触发滚动
浏览器不会对“高度自适应”的元素启用滚动条，哪怕内容撑爆了。必须显式设置 width 和 height（或 max-height），否则 overflow 形同虚设。
-
height: 200px是最稳妥的写法；用max-height也行，但需确认父级没限制高度 - 避免只设
min-height或flex: 1—— 这些不构成“可滚动约束” - 移动端注意
vh单位可能因地址栏收起/弹出而抖动，优先用固定像素或rem
overflow: auto vs scroll 的实际区别
overflow: auto 只在内容溢出时显示滚动条，干净利落；overflow: scroll 强制始终显示滚动条（哪怕没内容），会挤占空间、影响布局。
- 桌面端用
overflow-y: auto+overflow-x: hidden最常见，防横向滚动干扰阅读 - 移动端慎用
overflow-x: scroll，容易误触导致页面横向偏移 - 若需隐藏原生滚动条但保留滚动能力：加
overflow-y: scroll+ CSS 伪元素覆盖::-webkit-scrollbar
文字过长但不想出现滚动条？用 CSS 动画模拟滚动
当设计要求“文字自动滑过，不暴露滚动条”，就不能靠 overflow，得用 @keyframes + transform。
- 容器必须
overflow: hidden，子元素用white-space: nowrap防换行 - 动画起点设为
transform: translateX(100%)，终点translateX(-100%)，确保无缝循环 - 别用
left或margin-left做位移 —— 触发重排，低端机卡顿明显 - 长文本建议加
will-change: transform提示 GPU 加速（小字幕可省）
最容易被忽略的一点：滚动容器如果嵌在 display: flex 或 display: grid 的父级里，父级默认不收缩，子容器的 height 可能被忽略。此时要给父级加 min-height: 0 或 overflow: hidden 打破 flex item 的最小尺寸限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
