IE11 上的 Flexbox：图像无故拉伸？

Question

我在 IE11 上遇到 flexbox 问题，虽然我知道有很多已知问题，但我一直无法找到解决方案…

 <div class="latest-posts">
    <article class="post-grid">
        <img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
        <div class="article-content">
             <h2>THIS IS POST TITLE</h2>
             <p>BLAH</p>
        </div>
    </article>
</div>

还有 CSS…

 img {
  max-width: 100%;
}

.latest-posts {
  margin: 30px auto;
}

article.post-grid {
  width: 375px;
  float: left;
  margin: 0 25px 100px 0;
  padding-bottom: 20px;
  background-color: #fff;
  border: 1px solid #f3f3f3;
  border-radius: 2px;
  font-size: 14px;
  line-height: 26px;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
}
.article-content {
  padding: 20px 35px;
}

图像在 flex 容器中被拉伸。

应用 align-items: flex-start （我想，因为“拉伸”是默认值……）或 justify-content: flex-start 似乎不起作用。

Codepen： 我的意思的例子

我究竟做错了什么？

原文由 Jusi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

为避免这种有趣的行为，您可以重置 flex-shrink 属性。

这看起来像一个错误，尽管微软说：

<‘弹性收缩’>

为弹性项目设置弹性收缩因子或负弹性。弹性收缩因子决定弹性项目相对于弹性容器中的其他项目收缩多少。

如果省略，则元素的负灵活性为“0”。负值无效。

资料来源： https ://msdn.microsoft.com/en-us/library/jj127297%28v=vs.85%29.aspx https://msdn.microsoft.com/en-us//library/hh772069%28v= vs.85%29.aspx

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

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

.latest-posts {
  margin: 30px auto;
}

article.post-grid {
  width: 375px;
  float: left;
  margin: 0 25px 100px 0;
  padding-bottom: 20px;
  background-color: #fff;
  border: 1px solid #f3f3f3;
  border-radius: 2px;
  font-size: 14px;
  line-height: 26px;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: flex-start;
  align-content: flex-start;
}
article.post-grid .article-content {
  padding: 20px 35px;
}

 <div class="latest-posts">
  <article class="post-grid">
    <img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
    <div class="article-content">
      <h2>THIS IS POST TITLE</h2>
      <p>Society excited by cottage private an it esteems. Fully begin on by wound an. Girl rich in do up or both. At declared in as rejoiced of together.</p>
    </div>
  </article>
  <article class="post-grid">
    <img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
    <div class="article-content">
      <h2>MUCH LONGER POST TITLE TO ILLUSTRATE HEIGHTS</h2>
      <p>Recommend new contented intention improving bed performed age.</p>
    </div>
  </article>
  <article class="post-grid">
    <img src="http://lorempixel.com/image_output/cats-q-c-640-480-4.jpg" alt="" />
    <div class="article-content">
      <h2>SHORT TITLE</h2>
      <p>Merry alone do it burst me songs. Sorry equal charm joy her those folly ham. In they no is many both. Recommend new contented intention improving bed performed age. Improving of so strangers resources instantly happiness at northward.</p>
    </div>
  </article>
</div>

http://codepen.io/anon/pen/KzBOvq

原文由 G-Cyrillus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我在横轴上拉伸了图像（在高度上拉伸，使用 flex-direction: row）。

这个 Stack Overflow Q/A 帮助我解决了这个问题：

链接在这里

我必须在我的 img 上设置以下 CSS：

 align-self: flex-start;

您可能需要除 flex-start 之外的其他值--- 当然，这取决于您的目标。我的方法是让我的图像位于行的顶部。

原文由 Rik Schoonbeek 发布，翻译遵循 CC BY-SA 4.0 许可协议