为什么<img> width在flexbox中不能正确更新？

Question

我无法解释一个非常奇怪的行为：

复制步骤：

1. 创建一个包含非空<div>和<img>的flexbox容器，将<img>的宽度设置为绝对值，例如150px。
2. 在浏览器Web检查器中禁用缓存并启用网络限制。这两个动作都是必需的。
3. 刷新HTML文档（或“运行” JSFiddle）

示例

<div class="container">
  <div class="first">Text text text</div>
  <img class="second" src="https://i.stack.imgur.com/VmmrB.png">
</div>

.container {
  display: flex;
  border: 1px solid black;
}
.first {
  background: antiquewhite;
}
.second {
  width: 150px;
  height: 150px;
}

JSFiddle：https://jsfiddle.net/d6zes5yc/

预期结果：

图像宽度等于CSS中设置的宽度，例如。 G。 150px

实际结果：

图片缩小 ...

... ，但是如果调整窗口大小，它将立即更新宽度（！）。 Web检查器显示其宽度与CSS中设置的宽度不符：

如果我调整文档大小或更改浏览器选项卡然后返回，则图像宽度将更改为正常值（！）。如果这没有发生，我会认为我不了解flexbox规则中有关flexbox元素宽度如何计算的某些知识。但是，当我切换到另一个选项卡并返回时，浏览器显示文档的方式有所不同，这一事实看起来很奇怪。这是浏览器中的错误吗？ 对此行为的解释是什么？

经过测试：

• 歌剧64.0.3417.92
• 谷歌浏览器78.0.3904.108
• Mozilla Firefox 70.0.1

在falkon 3.1.0中，它可以按预期工作

注意：声明min-width / max-width与width或flex-shrink: 0相同的值可以“隐藏”“问题”。但是一个真正的问题是缺乏对为什么会发生这种情况的理解。

Answer 1

请尝试使用此代码

.container {
  display: flex;
  border: 1px solid black;
}

.first {
  background: antiquewhite;
}

.second {
  width: 150px;
  height: 150px;
  flex-shrink: 0;
  -webkit-flex-shrink: 0;
}

<div class="container">
  <div class="first">
    Open "Network" tab in browser web inspector.
    Set "disable cache" and enable network throttling ("Fast 3G" works for me).
    Make viewport narrow enough; there must not be free space in flex container.
    Run the jsfiddle.
    See that image width is LESS then 150px.
    Resize the window a bit.
    See that image width become 150px now.
  </div>
  <img class="second" src="https://i.stack.imgur.com/VmmrB.png">
</div>