Flexbox：IE 11中的img溢出

Question

以下代码适用于我测试过的所有现代浏览器（safari，chrome和firefox），Internet Explorer除外。我正试图在logo内垂直和水平居中图像。问题是img溢出了50px 50px的容器。如果我从css中删除flexbox，图像不会溢出，但它不再居中。

我已经看过Flexbugs来尝试解决问题。但没有运气。任何建议都非常感谢。

HTML

<div class="content">
  <ul>
    <li>
      <section class="post">
        <div class="post-header">
          <div class="logo">
            <img src="#" alt="">
          </div>
        </div>
      </section>
    </li>
  </ul>
</div>

CSS

.content {
  max-width: 400px;
  padding-left: 1em;
  padding-right: 1em;
}
.logo {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid #000;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  float: left;
  height: 50px;
  width: 50px;
}
img {
  max-height: 100%;
  max-width: 100%;
}