为何图片直接放置与包裹Div后，容器scrollWidth数值不同？

核心差异来自flex子元素的盒模型特性与浏览器布局逻辑的交互，具体两点：

1. img默认样式的限制
   绝大多数浏览器会给img添加默认样式：max-width: 100%; height: auto;，用于实现响应式适配。

   • 当img直接作为flex容器.slider的子元素时，max-width:100%的参考对象是.slider的宽度，但.slider的宽度又由所有img的总宽度决定，形成循环依赖。浏览器为了完成布局，会压缩img的宽度，使其总宽度尽可能适配.container的可视宽度（90%），此时你设置的min-width:13rem会被忽略，导致每个img实际宽度远小于13rem，最终scrollWidth值偏低。
   • 当img被div包裹后，div作为flex子元素，默认没有max-width限制，它的宽度会被内部img的min-width:13rem完全撑开（此时img的max-width:100%参考的是父div的宽度，正好满足min-width要求）。10个div加上9个1rem的列间距，总宽度为 10*13rem + 9*1rem = 139rem，按1rem=16px计算正好是2224px，这就是scrollWidth的来源。

2. 不同元素的布局逻辑差异

   • img是替换元素，宽度计算会受自身固有尺寸、默认样式等多重因素干扰；而div是块级容器，宽度仅由内部内容（这里是img的min-width）决定，布局逻辑更直接，不会出现循环依赖导致的宽度压缩。

内容的提问来源于stack exchange，提问作者Prashant