IE11上的Flexbox:图片无故被拉长?-FlexboxonIE11:imagestretchedfornoreason?

63  

to avoid this funny behavior, you may reset the flex-shrink propertie.

为了避免这种有趣的行为，您可以重置弹性收缩属性。

This looks like a bug despite what microsoft says :

尽管微软说:

<'flex-shrink'>

<“flex-shrink”>

Sets the flex shrink factor or negative flexibility for the flex item. The flex shrink factor determines how much a flex item will shrink relative to the other items in the flex container.

为flex项目设置flex收缩因子或负灵活性。flex收缩因子决定一个flex项目相对于flex容器中的其他项目会收缩多少。

If omitted, the element's negative flexibility is "0". A negative value is not valid.

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

Source: 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

来源: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;
}

  

    
    

      
THIS IS POST TITLE
      
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.
    
  
  

    
    

      
MUCH LONGER POST TITLE TO ILLUSTRATE HEIGHTS
      
Recommend new contented intention improving bed performed age.
    
  
  

    
    

      
SHORT TITLE
      
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.
    
  

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

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

0  

I had image stretch on the cross-axis (stretch in height, using flex-direction: row).

我在横轴上进行了图像拉伸(在高度上进行拉伸，使用弯曲方向:行)。

This stackoverflow Q/A helped me solve it:

这个stackoverflow Q/A帮助我解决了:

Link here

链接在这里

I had to set the following css on my img:

我必须在img上设置以下css:

align-self: flex-start;

You might need another value than flex-start ofcourse, depending on your goal. Mine is to have my image be at the top of the row.

当然，根据你的目标，你可能需要一个比弹性启动更好的值。我的想法是让我的形象排在最前面。