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

Question

现象

https://demo.cssworld.cn/new/6/2-2.php

1. container容器的宽度是320px
2. 内部子元素的 累计宽度大于320px
3. 弹性子元素的 flex-shrink 值为1 ，也就是默认允许收缩
4. flex-wrap的默认值为nowrap ,表示不允许换行

问题： 既然不允许换行，但是允许收缩，为什么 子元素 没有收缩适应弹性容器，而是溢出了？

我些的测试

    <div style="display: flex; width: 320px; border: 2px red solid;">

        <div style="width: 100px;">
            <img src="https://demo.cssworld.cn/new/images/nature-7.jpg" />
        </div>
        <div style="width: 100px;">
            <img src="https://demo.cssworld.cn/new/images/wallpaper-3.jpg" />
        </div>
        <div>
            <img src="https://demo.cssworld.cn/new/images/nature-8.jpg" />

        </div>
        <div>
            <img src="https://demo.cssworld.cn/new/images/wallpaper-2.jpg" />

        </div>
    </div>

为啥 会出现两种不同的效果？

Answer 1

你理解错 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