web-dev-qa-db-fra.com

Pourquoi un article flexible est-il limité à la taille des parents?

Considérant l'exemple suivant ...

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.parent {
  min-height: 100vh;
  width: 50vw;
  margin: 0 auto;
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  border: 1px solid blue;
  width: 150%;
}
<div class="parent">
        <div class="child">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet tellus cras adipiscing enim eu turpis. Neque aliquam vestibulum morbi blandit. Sem integer vitae justo eget magna. 
        </div>
</div>

... Je m'attends à ce que l'enfant grandisse pour width:150% et devenir trop grand pour son parent dans le sens gauche et droit (car il est centré horizontalement).

Pourquoi cela ne se produit-il pas?

Note: Je suis intéressé par des réponses tirées de sources officielles ou fiables, identifiant idéalement tout bug ou spécification mentionnant le comportement et toutes les solutions de contournement possibles.

Informations de débogage: Expérience dans Chrome, Ubuntu 17.10. N'a pas encore testé cross-browser, sera mis à jour comme je le fais.

cssflexboxcentering
23
Andrei Gheorghiu

Vous devez considérer flex-shrink. Comme vous pouvez le lire ici :

La propriété CSS flex-shrink spécifie le facteur de rétrécissement flex d'un élément flex. Les éléments flexibles rétréciront pour remplir le conteneur en fonction du nombre de flex-shrink, lorsque la taille par défaut des éléments flexibles est plus grand que le conteneur flexible .

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}

.parent {
  min-height: 100vh;
  width: 50vw;
  margin: 0 auto;
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  border: 1px solid blue;
  width: 150%;
  flex-shrink: 0; /* added this */
}
<div class="parent">
  <div class="child">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet tellus cras adipiscing enim eu turpis. Neque aliquam vestibulum morbi blandit. Sem integer vitae justo eget magna.
  </div>
</div>

Et comme nous pouvons le lire ici aussi :

La propriété flex-shrink spécifie le facteur de rétrécissement flex , qui détermine le degré de rétrécissement de l'élément flex par rapport au reste les éléments flexibles dans le conteneur flexible lorsque espace libre négatif(1) est distribué .

Cette propriété traite les situations dans lesquelles le navigateur calcule les valeurs de base flexibles des éléments flexibles et trouve qu'elles sont trop grandes pour tenir dans le conteneur flexible . Tant que flex-shrink a une valeur positive les articles rétréciront afin qu'ils ne débordent pas du conteneur.

Donc, en définissant flex-shrink à 0 l'élément ne rétrécira jamais, vous autorisez le débordement (par défaut, la valeur est définie sur 1).

(1) Espace libre négatif : Nous avons un espace libre négatif lorsque la taille naturelle des éléments s'additionne à plus grande que l'espace disponible dans le conteneur flexible.

28
Temani Afif