css - 尽管设置了宽度和高度，但图像在加载后导致回流？

Question

我注意到一种让我感到困惑的行为，我在 Chrome 和 Firefox 中都看到过这种行为：我有一个带有两个孩子、一个图像和一个文本 div 的 flex 容器。例如，我设置的图像的100px宽度和高度是为了在图像加载后不会导致回流。

.container {
   display: flex;
   width: 200px;
}

.resource-type-logo {
  width: 100px;
  height: 100px;
  // for completeness sake, despite it being default
  min-width: auto;
  // for illustrative purposes
  border: 2px solid red;
  margin-right: 8px;
}

.text {
    margin-right: auto
}

但是，在 Chrome 和 Firefox 上，在加载图像时，它看起来像这样（从加载时的屏幕截图中测量，宽度为 around71px和 height 100px）：

图像加载后（具有正确的宽度和高度100px）：

根据我的测量，我注意到如果我将图像的min-width: 0. 换句话说，如果我设置min-width: 0然后图像（加载后）缩小到，70.67px因为文本想要占用尽可能多的空间。但这也是图像加载之前框的确切宽度：~71px. 我用多种尺寸在 Firefox 中对此进行了测试，这似乎在两种浏览器中都适用。

设置min-width:100px完全修复了回流问题，如加载图像时的截图所示：

所以我的问题是：为什么在加载过程中它会缩小到如果min-width设置为的大小0？我认为如果我设置一个固定的像素值width，height然后加载后的回流就可以了，但这似乎表明并非如此。

标签： css