如何用CSS防止Flex子元素溢出屏幕-css教程-PHP中文网

flex-shrink: 1 不起作用是因为默认 min-width: auto 阻止收缩，必须显式设置 min-width: 0（水平布局）或 min-height: 0（垂直布局）才能解锁收缩能力，否则长文本、url 或图片固有宽度会成为不可压缩底线。

如何用css防止flex子元素溢出屏幕

flex-shrink: 1 为什么不起作用

写了 flex-shrink: 1 或 flex: 1，子元素还是撑破容器——根本不是 flex 属性没生效，而是浏览器死守子项默认的 min-width: auto。这个隐式限制会把长 URL、连续无空格英文、图片固有宽度当成“不可压缩底线”，哪怕你设了收缩，它也拒绝变窄。

必须显式加 min-width: 0（水平布局）或 min-height: 0（垂直布局）才能解锁收缩能力。DevTools 里看 computed 的 min-width 还是 auto？那就还没解绑。

min-width: 0 只对直接含内容的子元素有效；如果子项内部还有 Flex 容器，内层要收缩的元素也得单独加
Firefox 对 min-width: auto 执行更严格，别指望 Chrome 的“悄悄妥协”能通用
flex: 1 1 0 比 flex: 1 更稳：第三个参数 0 是像素值，明确表示“初始宽度为 0px”，避免百分比基准不确定导致截断抖动

text-overflow: ellipsis 不显示省略号

只写 text-overflow: ellipsis 和 overflow: hidden 没用。它生效需要四个条件同时落在同一元素上，漏一个就失效：

min-width: 0（开关，已强调）
white-space: nowrap（必须写在文本所在元素上，写父容器会导致提前换行）
overflow: hidden（裁剪动作本身）
display: block 或 inline-block（text-overflow 只对块级元素有效；span 类行内元素必须先加这个）

另外，该元素自身或父容器必须有明确宽度约束，比如 width、max-width 或稳定的 flex-basis。光靠 flex: 1 不够，因为它的计算依赖父容器尺寸，而尺寸可能尚未稳定。

移动端 Safari 溢出控制失效

在 iOS Safari 上，min-width: 0 可能被 min-width: -webkit-fit-content 覆盖掉，尤其当用了某些 UI 库或重置样式时。检查 computed 样式，确认最终生效的是 0 而不是其他值。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

图片、iframe、video 这类媒体元素有固有尺寸，min-width: 0 对它们无效。必须额外加：

max-width: 100%
height: auto

如果子项用了 padding 却没设 box-sizing: border-box，padding 会叠加在 flex-basis 之外，直接超宽。所有参与 Flex 布局的子元素，建议统一加 box-sizing: border-box。

overflow-x: auto 滚动条不出现

overflow-x: auto 没反应，大概率是因为 Flex 容器没被“框住”。Flex 默认 width: auto，会随内容无限撑宽，根本不存在溢出，滚动条自然不触发。

必须同时满足三个条件：

父容器设显式 width 或 max-width（例如 width: 100%、max-width: 480px）
子元素设 flex-shrink: 0 或 flex: 0 0 auto（防止 Flex 自动压缩，否则内容压扁了，根本不会溢出）
子元素内文本需 white-space: nowrap（否则提前换行，滚动需求消失）

注意：overflow: auto 可能误触垂直滚动，优先用 overflow-x: auto，并确保父容器高度可控，避免意外拉高。

真正卡住的往往不是某一个属性，而是 min-width: 0、white-space: nowrap、overflow: hidden、text-overflow: ellipsis 这四者是否严格落在同一元素上，以及每一层父容器是否都提供了明确的宽度约束——尤其是嵌套 Flex 中，外层加了 min-width: 0，内层该加的还得加。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！