overflow 需配合明确尺寸约束（如 max-height）才生效，否则不触发滚动；慎用 overflow: hidden 以免裁剪绝对定位元素；xy 轴组合需遵循规范，推荐 overflow-y: auto + overflow-x: hidden；text-overflow: ellipsis 需 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 三者共存。
overflow 不是“一设就滚动”的开关，而是浏览器对内容是否溢出、如何呈现的策略声明。它只在容器有明确尺寸约束的前提下才起作用，且行为受轴向组合、定位方式、浏览器默认机制等多重因素影响。
必须配尺寸约束，否则 overflow 失效
容器没设 height 或 max-height（或 width / max-width），内容再长也不会触发滚动——因为浏览器认为“容器高度随内容自适应”，根本不存在“溢出”。
- 优先用 max-height（如
max-height: 300px）代替height：内容少时不留白，内容多时才滚动 - 横向滚动同理，用 max-width 配合
overflow-x: auto - Flex 子项常失效？加
min-height: 0或width: 0; min-width: 0，打破 flex 默认拉伸行为
慎用 overflow: hidden，它会裁剪绝对定位元素
给父容器设 overflow: hidden 后，里面的 position: absolute 下拉菜单、Tooltip 可能被截断——哪怕 top/left 在可视范围内。这是因为 hidden 创建新包含块，并作为裁剪边界。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 替代方案：改用
overflow: clip（现代浏览器支持，更安全） - 或把需自由溢出的子元素移出该容器，用
position: absolute+top/left手动定位 - 注意：脱离文档流后，它不再撑高父容器，也不受父级 overflow 影响
xy 轴设置不能随意混搭 visible 和 scroll
overflow-y: scroll 和 overflow-x: visible 一起写，浏览器不会照单全收。规范强制：只要任一轴为 scroll 或 auto，另一轴的 visible 会被重算为 auto（水平）或 hidden（垂直）。
立即学习“前端免费学习笔记（深入）”；
- 想让下拉菜单水平溢出？别依赖
overflow-x: visible，改用相对定位 + 绝对定位子元素 - 日常推荐组合：
overflow-y: auto; overflow-x: hidden，语义清晰、兼容稳定 - Firefox 中偶现纵轴滚动条？加
min-height: 0修复
text-overflow: ellipsis 和自定义滚动条要配齐条件
单行省略号不是独立属性，而是三者协同：white-space: nowrap + overflow: hidden + text-overflow: ellipsis。缺一不可。
- 滚动条样式定制仅 WebKit 支持：
::-webkit-scrollbar系列伪元素可调宽、色、圆角 - macOS 上滚动条默认隐藏，不是 bug——悬停或滚动时才会淡入；调试时先试滚轮，别急着改 CSS
- 需要常显滚动条？加
.container::-webkit-scrollbar { width: 8px; }，Firefox 用scrollbar-width: thin
