L'enfant dont la hauteur maximale est de 100% déborde le parent.

Question

J'essaie de comprendre ce qui me semble être un comportement inattendu :

J'ai un élément avec une hauteur maximale de 100% à l'intérieur d'un conteneur qui utilise également une hauteur maximale mais, de manière inattendue, l'enfant dépasse le parent :

Cas de test : http://jsfiddle.net/bq4Wu/16/

.container {  
    background: blue; 
    padding: 10px; 
    max-height: 200px; 
    max-width: 200px; 
}

img { 
    display: block;
    max-height: 100%; 
    max-width: 100%; 
}

Ce problème est toutefois résolu si l'on donne une hauteur explicite au parent :

Cas de test : http://jsfiddle.net/bq4Wu/17/

.container {  
    height: 200px;
}

Quelqu'un sait-il pourquoi l'enfant ne respecte pas la hauteur maximale de son parent dans le premier exemple ? Pourquoi une hauteur explicite est-elle nécessaire ?

Answer 1

Les conteneurs enveloppent déjà généralement bien leur contenu. L'inverse ne fonctionne souvent pas aussi bien : les enfants ne remplissent pas bien leurs ancêtres. Définissez donc vos valeurs de largeur/hauteur sur l'élément le plus interne plutôt que sur l'élément le plus externe, et laissez les éléments externes envelopper leur contenu.

.container {
    background: blue;
    padding: 10px;
}

img {
    display: block;
    max-height: 200px;
    max-width: 200px;
}

Answer 2

http://jsfiddle.net/mpalpha/71Lhcb5q/

.container {  
display: flex;
  background: blue; 
  padding: 10px; 
  max-height: 200px; 
  max-width: 200px; 
}

img { 
 object-fit: contain;
  max-height: 100%; 
  max-width: 100%; 
}

<div class="container">
  <img src="http://placekitten.com/400/500" />
</div>

Answer 3

Votre conteneur n'a pas de hauteur.

Ajouter hauteur : 200px ;

dans les conteneurs css et le chaton restera à l'intérieur.