使用具有最大宽度的img时，flex项无法正确增长

Question

在弹性项目中使用最大宽度的图像时，弹性项目的增长幅度超过了预期值。我的预期结果是flex项目与图像一样宽。为什么会这样，如何解决？

此问题的最小示例：https://jsfiddle.net/kpy4nra7/

HTML：

<div class='flex'>
   <div>hello</div> 
   <div>hello world</div> 
   <div>
     <img src="https://via.placeholder.com/400x100">
   </div> 
</div>    

CSS：

.flex {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  align-items: flex-start;
}

.flex div {
  background:pink;
}

.flex img {
  max-width: 50%;
}