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

现象

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>

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