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

Question

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

Demandé el 10 de Janvier, 2013: Quand la question a-t-elle été
201161 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la 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 ?

Demandé el 10 de Janvier, 2013 par iamkeir

1 votes

Les navigateurs ont-ils modifié leur comportement par défaut à cet égard ? Parce que sur ma version actuelle de Google Chrome, les deux manipulations ci-dessus ne montrent pas le débordement de l'enfant pour moi. Les nouveaux navigateurs utilisent-ils par défaut le format box-sizing : border-box ou quelque chose comme ça ?

Commenté el 20 de Janvier, 2021 par David Mays

Answer 1

5 Réponses

Answer 2

3voto

KidBilly Points 2735

Voici une solution pour une question récemment ouverte et marquée comme un doublon de cette question. Les <img> dépassait la hauteur maximale du parent <div> .

Cassé : Violon

Travailler : Violon

Dans ce cas, l'ajout de display:flex aux 2 parents <div> les étiquettes étaient la réponse

Répondu el 10 de Mai, 2018 par KidBilly (2735 Points )

Answer 3

2voto

Kevin Brydon Points 1679

Peut-être que quelqu'un d'autre pourra expliquer les raisons de votre problème, mais vous pouvez le résoudre en spécifiant la hauteur du conteneur et en fixant la hauteur de l'image à 100 %. Il est important que le conteneur width de l'image apparaît avant le height .

<html>
    <head>
        <style>
            .container {  
                background: blue; 
                padding: 10px;
                height: 100%;
                max-height: 200px; 
                max-width: 300px; 
            }

            .container img {
                width: 100%;
                height: 100%
            }
        </style>
    </head>
    <body>
        <div class="container">
            <img src="http://placekitten.com/400/500" />
        </div>
    </body>
</html>

Répondu el 10 de Janvier, 2013 par Kevin Brydon (1679 Points )

Answer 4

2voto

ashleynolan Points 58

L'exemple suivant est celui qui s'en rapproche le plus :

http://jsfiddle.net/YRFJQ/1/

ou

.container {  
  background: blue; 
  border: 10px solid blue; 
  max-height: 200px; 
  max-width: 200px; 
  overflow:hidden;
  box-sizing:border-box;
}

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

Le problème principal est que la hauteur prend le pourcentage de la hauteur du conteneur, donc il cherche une hauteur explicitement définie dans le conteneur parent, pas sa hauteur maximale.

La seule façon de contourner ce problème, dans une certaine mesure, est le truc ci-dessus où vous pouvez cacher le débordement, mais alors le rembourrage agit toujours comme un espace visible pour l'image, et donc le remplacement par une bordure solide fonctionne à la place (et ensuite ajouter border-box pour faire 200px si c'est la largeur dont vous avez besoin).

Je ne suis pas sûr que cela corresponde à ce dont vous avez besoin, mais c'est le mieux que j'aie pu trouver.

Répondu el 10 de Janvier, 2013 par ashleynolan (58 Points )

Answer 5

2voto

tibbus Points 3452

Une bonne solution consiste à ne pas utiliser la hauteur sur le parent et à l'utiliser uniquement sur l'enfant avec Voir le port :

Exemple de violon : https://jsfiddle.net/voan3v13/1/

body, html {
  width: 100%;
  height: 100%;
}
.parent {
  width: 400px;
  background: green;
}

.child {
  max-height: 40vh;
  background: blue;
  overflow-y: scroll;
}

Répondu el 13 de Février, 2018 par tibbus (3452 Points )

Answer 6

2voto

m4heshd Points 263

Il suffit d'ajouter display: flex; dans le conteneur fera l'affaire. Regardez ceci .

Répondu el 2 de Avril, 2021 par m4heshd (263 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: