web-dev-qa-db-fra.com

Flexbox: comment obtenir des divs pour remplir 100% de la largeur du conteneur sans les emballer?

Je suis en train de mettre à jour un ancien modèle de grille basé sur inline-block Dont je dispose vers un plus récent Flexbox que j'ai créé. Tout a bien fonctionné, à l'exception d'un petit problème, qui est devenu un peu un dealbreaker:

J'ai un tas de curseurs contrôlés par CSS; il y a donc un wrapper contenant 100% de largeur, et à l'intérieur se trouve un autre div: sa largeur est également de 100%, mais son white-space est défini sur nowrap. En utilisant inline-block, Cela signifiait que les divs internes (qui étaient également réglés sur une largeur de 100%) ne seraient pas liés par leurs parents 'contraintes et se faufiler à la ligne suivante - ils continueraient à sortir de la boîte. C'est exactement ce que je voulais. Cependant, je ne peux pas obtenir que cela fonctionne du tout avec flexbox. Pour référence, voici une image:

Flexbox problem

Et pour référence, voici un jsFiddle de la chose qui fonctionne avec inline-block: http://jsfiddle.net/5zzvqx4b/

... et ne fonctionne pas avec Flexbox: http://jsfiddle.net/5zzvqx4b/1/

J'ai essayé toutes sortes de variations avec flex, flex-basis, flex-wrap, flex-grow, Etc., mais pour la vie de moi je ne peux pas obtenir cela fonctionne.

Notez que je peux le forcer à faire ce que je veux d'une manière inflexible en définissant la largeur .boxcontainer Sur 200%. Cela fonctionne pour cet exemple unique, mais dans certains cas, je ne saurai pas à l'avance combien de boîtes enfants il y aura, et je préférerais ne pas recourir à un style en ligne sur chaque élément si possible.

csscss3flexbox
45
indextwo

Pour éviter que les éléments flexibles ne se réduisent, définissez le facteur de rétrécissement de la flexion sur 0:

Le facteur de rétrécissement de flexion détermine le degré de rétrécissement de l'élément flex par rapport au reste de la flex items dans le conteneur Flex lorsque l’espace libre négatif est distribué. Lorsqu'il est omis, il est défini sur 1.

.boxcontainer .box {
  flex-shrink: 0;
}

* {
  box-sizing: border-box;
}
.wrapper {
  width: 200px;
  background-color: #EEEEEE;
  border: 2px solid #DDDDDD;
  padding: 1rem;
}
.boxcontainer {
  position: relative;
  left: 0;
  border: 2px solid #BDC3C7;
  transition: all 0.4s ease;
  display: flex;
}
.boxcontainer .box {
  width: 100%;
  padding: 1rem;
  flex-shrink: 0;
}
.boxcontainer .box:first-child {
  background-color: #F47983;
}
.boxcontainer .box:nth-child(2) {
  background-color: #FABCC1;
}
#slidetrigger:checked ~ .wrapper .boxcontainer {
  left: -100%;
}
#overflowtrigger:checked ~ .wrapper {
  overflow: hidden;
}
<input type="checkbox" id="overflowtrigger" />
<label for="overflowtrigger">Hide overflow</label><br />
<input type="checkbox" id="slidetrigger" />
<label for="slidetrigger">Slide!</label>
<div class="wrapper">
  <div class="boxcontainer">
    <div class="box">
      First bunch of content.
    </div>
    <div class="box">
      Second load  of content.
    </div>
  </div>
</div>
46
Oriol

Vous pouvez utiliser la propriété raccourci flex et la définir sur

flex: 0 0 100%;

C'est flex-grow, flex-shrink, et flex-basis en une seule ligne. La contraction par flexion a été décrite ci-dessus, la croissance par flexion est l'inverse et la base par flexion est la taille du conteneur.

29
Nick Salloum

Dans mon cas, juste en utilisant flex-shrink: 0 n'a pas fonctionné. Mais en ajoutant flex-grow: 1 cela a fonctionné.

.item {
    flex-shrink: 0;
    flex-grow: 1;
}
13
Neil Patrao