使用带有浏览器缩放功能的Flexbox时，项目不会缩放

Question

我继承了一个使用Flexbox实现基本2列布局的网站。用户已注意到，当您使用浏览器的缩放功能时，flex显示项目周围的内容会缩放，但弹性项本身实际上会缩小。

我试图将flex-shrink设置为0，但这似乎无法解决问题。

这是一个说明问题的代码。 https://codepen.io/anon/pen/owGmEd

我试图弄清楚是否可以使用flexbox并且仍然可以像用户期望的那样进行浏览器缩放工作。我可以重写代码来放弃flexbox，但这似乎是一个沉重的方法。

＆＃13;

＆＃13;

div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 60px;
}

img {
  width: 50%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  flex-shrink: 0;
}

＆＃13;

<div>
  <img src="http://placeholder.pics/svg/300x444" />
  <img src="http://placeholder.pics/svg/300x444" />
</div>

＆＃13;

＆＃13;

＆＃13;