web-dev-qa-db-fra.com

Comment empêcher les flex-items de déborder de flex-parents sans enveloppe?

J'ai une flexbox avec flex-direction: row. Les éléments enfants ont un ensemble min-width. Lorsque la fenêtre est réduite au-delà du point où le min-width est atteint, les éléments commencent à déborder du conteneur flex.

.parent {
  display: flex;
  flex-direction: row;
  background-color: red;
}

.child {
  min-width: 100px;
  flex-basis: 0px;
  flex-grow: 1;
  margin: 5px;
  height: 100px;
  background-color: blue;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

https://jsfiddle.net/4t8029q8/

Existe-t-il un moyen de forcer le conteneur à s'étirer pour contenir les éléments sans définir un min-width explicite sur le parent? Cela donne le comportement que j'essaie d'obtenir, mais il est trop rigide pour accueillir un nombre variable d'éléments.

.parent {
  display: flex;
  flex-direction: row;
  background-color: red;
  min-width: 330px
}

.child {
  min-width: 100px;
  flex-basis: 0px;
  flex-grow: 1;
  margin: 5px;
  height: 100px;
  background-color: blue;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

https://jsfiddle.net/4t8029q8/1/

C’est ce que je veux, pour que les éléments flex ne débordent jamais du conteneur flex, même si la page nécessite un défilement horizontal.

Remarque: j'ai une autre logique plus compliquée nécessitant flex-basis: 0px et flex-grow: 1, de sorte que ces lignes ne peuvent pas être supprimés.

htmlcsscss3flexbox
4
thedarklord47

Définissez display: inline-flex sur la classe .parent pour le changer en un élément en ligne. Cela forcera également le .parent à se développer pour contenir ses enfants. Ensuite, en définissant min-width: 100% sur la classe .parent, il sera forcé de se développer à 100% de l'élément conteneur.

.parent {
  display: inline-flex;
  flex-direction: row;
  background-color: red;
  min-width: 100%;
}
.child {
  min-width: 100px;
  flex-basis: 0px;
  flex-grow: 1;

  margin: 5px;
  height: 100px;
  background-color: blue;
}
7
Robert O'Reilly

vous pouvez utiliser overflow-y: auto sur le conteneur parent, si le défilement n'a pas d'importance.

.parent {
  display: flex;
  flex-direction: row;
  overflow-y: auto;/*add this.*/
  background-color: red;
}

.child {
  min-width: 100px;
  flex-basis: 0px;
  flex-grow: 1;
  margin: 5px;
  height: 100px;
  background-color: blue;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

0
spiritsree

Vous demandez au conteneur de redimensionner de manière fluide afin d'éviter que les éléments enfants ne débordent. C'est un comportement dynamique, qui est le domaine de JavaScript, pas HTML ou CSS.

Étant donné que les moteurs de rendu HTML et CSS ne redistribuent pas automatiquement les documents source lorsque les éléments enfants débordent de leur conteneur, il n’a aucun moyen de savoir quand les enfants ont débordé et, par conséquent, se développer. Vous êtes dans un environnement statique. Le concept s'applique également à l'emballage. 

Voici une explication plus détaillée (qui couvre le comportement d’emballage, mais s’applique également au dépassement de capacité):

Vous aurez besoin d'un script ou éventuellement de requêtes multimédia pour que votre mise en page fonctionne comme vous le souhaitez.

0
Michael_B

Vous forcez vos éléments enfants à avoir une largeur spécifique, un peu comme l'a mentionné @Michael_B, cela crée essentiellement un environnement statique dans lequel ils resteront la largeur définie, quel que soit le parent.

Essentiellement, à ce stade, puisque vous connaissez la largeur minimale de vos éléments enfants, je créerais une requête multimédia, à l'exigence de largeur spécifique, qui dans ce cas est 100 pixels. Une fois que votre écran a atteint cette taille, forcez votre parent à avoir des éléments d'habillage en ajoutant flex-wrap: wrap; à votre parent. Lorsque vous êtes en dehors de cette largeur, assurez-vous de redéfinir le code CSS de votre parent de manière à ne pas autoriser le wrapping, flex-wrap: nowrap;. Cela permettra à vos éléments enfants de se terminer et votre parent créera un horizontal pour la page.

0
CaliCo