弹性布局 在允许 收缩，但是不允许换行的条件下 为什么没有收缩而是溢出了？-灵析社区

你理解错 flex-shrink 的意思了，flex-shrink: 1 的意思是收缩系数为 1。它只是个乘法里的系数，实际会收缩到多少，还要结合具体情况来看。 题中的这里其实是有收缩的，但收缩后子元素又被图片的宽度给“撑开”了。因为图片不像文本，溢出父元素以后它可以按照 `work-break` 的设置去换行。图片本身默认情况下是“不知道”该咋处理溢出的，想要让它知道，可以有两种方式： 1. 给 flex 的子元素加 `overflow: hidden`（默认是 `visible`，这个应该很好理解）：  2. 给 flex 的子元素加 `min-width: 0`（默认是 `auto`，对于 div 和 img 来说其实就是 `fit-content`、也就是最小宽度等于图片原始宽度，这也是为啥你这里它不收缩的主要原因 —— 图片已经到了自己能够到的最小宽度了）：  P.S. 这种方案同时还要给 flex 容器元素本身设置 overflow，否则最后一张图就会像图里那样溢出部分也会显示出来。 当然了，上面的方案都是从 flex 子元素入手的，像你的链接里第二个例子里那样直接给 img 设 `max-width: 100%` 也是一种解法。 * * * 参考阅读： > [https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-> past-content-> size](https://link.segmentfault.com/?enc=NnaI7l22wgIpFZoo%2FB7Xmw%3D%3D.KmGv2f1g9chbfGnzsqtXtwaK4ieQ4gy%2FV7jiZIeTT%2FePObmkoGgVVSGe0YtSS%2BfRlI3FNQ2QgDp32O4dI16mOH0XhWDrHJPHe0REqkXZDmEeu0twYckFoiTJ5aelfJ%2BW)