Flexbox sur IE11: une image étirée sans raison?

Question

Je vais avoir un problème avec flexbox sur IE11 et même si j'ai conscience qu'il y a beaucoup de problème connu, je n'ai pas été en mesure de trouver une solution...

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

Et le 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;
}

Les Images sont se tendu à l'intérieur d'un conteneur flex.

En appliquant align-items: flex-start (j'ai pensé que, puisque "tendu" est la valeur par défaut...) ou justify-content: flex-start ne semble pas fonctionner.

Codepen: exemple de ce que je veux dire

Ce que je fais mal?

Answer 1

pour éviter ce drôle de comportement, vous pouvez réinitialiser l' flex-shrink biens.

Cela ressemble à un bug en dépit de ce que dit microsoft :

<'flex-redimensionner">

Définit le flex facteur de rétrécissement ou négatif de la flexibilité pour le flex de l'élément. Le flex rétrécir facteur détermine la quantité de flex élément diminuera par rapport aux autres éléments dans le conteneur flex.

S'il est omis, l'élément négatif de la flexibilité est "0". Une valeur négative n'est pas valide.

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

Answer 2

J'avais l'image étirée sur l'axe transversal (étirement en hauteur, en utilisant flex-direction: row).

Cette pile Q / A m'a aidé à le résoudre:

Lien ici

Je devais définir les css suivants sur mon img:

 align-self: flex-start;
 

Vous aurez peut-être besoin d'une autre valeur que le cours à début flexible, selon votre objectif. La mienne est d’avoir mon image en haut de la rangée.

Answer 3

J'ai eu un bug similaire dans IE11. Les styles ont été tirés de Bootstrap 4.1, donc pour les images fluides que j’avais:

 .img-fluid {
    border: none;
    height: auto;
    max-width: 100%;
}
 

Dans mon cas, il est apparu que la raison était en max-width: 100% alors quand je l'ai changé en width: 100% le bogue a disparu:

 .img-fluid {
    border: none;
    height: auto;
    width: 100%;
}
 

Cette solution ne convient pas à tout le monde, mais j'espère que ce serait utile.

Answer 4

J'ai essayé chaque solution ici mais rien n'a fonctionné. La seule chose pour laquelle j'utilisais flexbox était de centrer verticalement une image affichée lors du survol d'une autre image. Donc, je viens d'utiliser une solution plus classique à la top: 50%; transform: translateY(-50%) et puis c'était ok. Donc, essentiellement, ne pas utiliser du tout flexbox alors .. #hateIE