前端大佬帮忙看一下这个关于 img 设置 max-width 后的行为问题

问题在 so 上也问过（ https://stackoverflow.com/questions/78135768/behavior-of-img-width-when-max-width-is-set ），但好像回复都没有抓住我想问题的要点（也可能是我没表述清楚）,在这里请 v2 的前端大佬帮忙看下。

问题是，我有一个 ul ，里面的 li 包含了一个 img 和一个 span （相当于一个 icon 和一个 label ，img 显式设置了宽度和高度），li 设置为了 display:flex 。而这个 ul 本身又在一个 div 下面，并且这个 div 的宽度可能不足以容纳 ul 的内容。如果 div 的宽度比 ul 窄，同时如果 li 里面的 img 设置了 max-widht:100%，则 li 就不能完全容纳这个 img 和 span ，span 的内容会超出 li 一部分。但如果把 img 的 max-width 去掉，或者把 img 换成 div （即便加上 max-width:100%），li 就能容纳元素的宽度。

我的问题是，既然在 flexbox 容器下 img 和 div 都是 block 元素（用浏览器 devtools 看到的结果），为什么行为会不一样？是什么样的 css 规则导致了这种不一致？

代码效果可以在这里看到： https://jsfiddle.net/c508dz6o/1/

<div class="root">
  <div class="container">
    <ul class="list-container">
      <li>
        <img class="icon" src="https://jsfiddle.net/img/favicon.png" />
        <span>Hello World !!!</span></li>
      <li>
        <div class="icon"></div><span>JavaScript</span>
      </li>
      <li>
        <div class="icon"></div>
        <span>Rust</span>
      </li>
    </ul>
  </div>
</div>

* {
  border: 0px;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

.root {
  display: flex;
  justify-content: center;
}

.list-container {
  border: 1px solid black;
  padding: 24px;
  list-style:none;
  display: flex;
  flex-direction: column;
}

.list-container li {
  border: 1px solid green;
  margin-top: 10px;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.icon {
  background: green;
  width: 16px;
  height: 16px;
  max-width: 100%;
  margin-right: 14px;
}

.list-container li:first-child {
  margin-top: 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  width: 50px;
}