Flexbox on IE11: image stretched for no reason?

by

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

This looks like a bug, despite what Microsoft says:

<‘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.

If omitted, the element’s negative flexibility is “0”. A negative value is not valid.

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

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

More Related Contents:

  1. flex property not working in IE
  2. Absolutely positioned flex item is not removed from the normal flow in IE11
  3. How to make a sticky footer using flexbox in IE11?
  4. Center one and right/left align other flexbox element
  5. Flex / Grid layouts not working on button or fieldset elements
  6. How do I keep two side-by-side div elements the same height?
  7. How to disable equal height columns in Flexbox?
  8. Proper use of flex properties when nesting flex containers
  9. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  10. Remove space (gaps) between multiple lines of flex items when they wrap
  11. Flexbox: 4 items per row
  12. Equal height columns with CSS
  13. Make flex items take content width, not width of parent container
  14. Using flex order property to re-arrange items for desktop and mobile views
  15. Properly sizing and aligning the flex item(s) on the last row
  16. Flexbox fill available space vertically
  17. Flexbox not giving equal width to elements
  18. Rendering problems using flexbox in Firefox and Chrome 48 [duplicate]
  19. Equal space between flex items
  20. How can I make a display:flex container expand horizontally with its wrapped contents?
  21. How to center-align one flex item and right-align another using Flexbox [duplicate]
  22. Why is there vertical scroll on the main container?
  23. How can I show three columns per row?
  24. How to center horizontally and vertically?
  25. How can I create a row-based masonry layout using CSS?
  26. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  27. How do I make flex box work in safari?
  28. Zebra striping a flexbox table with wrapping items
  29. Element with “display: inline-flex” has a strange top margin
  30. Sizing flex items on the last row

Leave a Comment