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

Je suis dans le processus de mise à jour d'un vieux inline-blockbase de la grille de modèle que j'ai une nouvelle Flexbox un que j'ai créé. Tout a bien fonctionné, à l'exception d'un petit hic, qui est devenu un peu un dealbreaker:

J'ai un tas de feuilles de style CSS contrôlé curseurs; il y a donc un contenant wrapper avec 100% de largeur, et l'intérieur est une autre div: sa largeur est de 100%, mais sa white-space est fixé à nowrap. À l'aide de inline-block, ce qui signifie que l'intérieur de la vrd (qui ont été aussi à 100% de la largeur) de ne pas être lié par leurs parents, les contraintes et les enrouler sur la ligne suivante, ils venaient tout juste d'effectuer de couler hors de la boîte. C'est exactement ce que je voulais. Cependant, je ne peux pas obtenir que cela fonctionne avec tous les flexbox. Pour référence, voici une image:

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

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

...et pas de travail 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 que cela fonctionne.

Remarque que je peut le forcer à faire ce que je veux dans un hacky, inflexible façon par la définition de la .boxcontainer largeur de 200%. Qui fonctionne pour ce seul exemple, mais dans certains cas, je ne sais pas à l'avance combien d'enfant boîtes, il y aura, et je préfère ne pas recourir à des inline style sur chaque élément, si possible.

  • ... pas une réponse, mais pourquoi voulez vous changer de flex, vous disposez d'un code de travail déjà qui est le préfixe gratuit, et fonctionne sur plusieurs navigateurs?
  • Parce que les autres exigences du projet qui, à ~20 000 lignes de code, serait probablement prendre un peu de temps pour aller dans.
  • oh, ok juste pour dire que certaines des propriétés flex vous définissez il n'y a même pas nécessaire, comme flex-direction: row;, justify-content: flex-start;, align-items: flex-start; ces règles par défaut, sauf si vous êtes de les écraser. il est un excellent guide ici.
  • Merci - c'est en effet très détaillé dans cet exemple, mais seulement parce que je copie-n-collé directement à partir de ma feuille de style, dans lequel il y a beaucoup de conditions et sous-classes, etc. c'est pourquoi les propriétés sont définies explicitement. Je ne sais pas flexbox assez bien pour écrire sur le haut de ma tête encore!
  • fait sens, alors, être conscient, prise en charge du navigateur pour le flex est IE10+, avec le ms* préfixe.
InformationsquelleAutor indextwo | 2015-06-06
  1. 43

    Pour empêcher la flexion des éléments de réduction, régler le flex facteur de rétrécissement à 0:

    La flex rétrécir facteur détermine combien la flex élément va
    chuter par rapport au reste de la flex éléments dans le flex
    conteneur lorsque négatif de l'espace libre est distribué. S'il est omis, il est
    mis à 1.

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

    CSS:

    * {
  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;
}

    HTML:

    <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>

    • Oh bon dieu merci. Je l'ai fait, ignoré la flex-shrink bien parce que les descriptions que j'avais lu ne semblent pas pertinents. Considérez que vous êtes accepté dans... de 6 minutes!
    InformationsquelleAutor Oriol
  2. 29

    Vous pouvez utiliser le raccourci flex propriété et le configurer pour

    flex: 0 0 100%;

    C'est flex-grow, flex-shrink, et flex-basis dans une ligne. Flex rétrécir a été décrit ci-dessus, flex grandir, c'est tout le contraire, et flex de base est la taille du récipient.

    InformationsquelleAutor Nick Salloum
  3. 12

    Dans mon cas, juste à l'aide de flex-shrink: 0 n'a pas fonctionné. Mais l'ajout de flex-grow: 1 à il a travaillé.

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