web-dev-qa-db-fra.com

L'élément Flex dépasse son contenant

J'ai un conteneur flex avec une width définie. Le conteneur a flex-direction: row et 2 colonnes. L'un est de largeur fixe, il est inflexible. L'autre est flexible et devrait convenir à tous les espaces restants du conteneur.

Lorsque le contenu d'une colonne flexible est suffisamment long, il déborde du conteneur et dépasse sa largeur.

_ {Pourquoi} est-ce que cela se produit? Et comment dois-je résoudre le problème correctement? 

Remarque: je l'ai déjà résolu en utilisant flex: 1 0 0 au lieu de 1 0 auto et tout irait bien. Mais je ne comprends tout simplement pas pourquoi il ne dépasse pas le parent et pourquoi il commence à envelopper le contenu? Est-ce même le moyen de le faire {à droite?

HTML:

<div class="flex-container">
  <div class="flex-item inflexible">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
  <div class="flex-item flexible">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
  </div>
 </div>

CSS:

.flex-container {
  display: flex;
  flex-direction: row;
  width: 500px;
  background-color: green;
}

.flex-item {
  display: block;
  margin: 20px 0;
}

.inflexible {
  flex: 0 0 auto;
  width: 100px;
  background-color: red;
}

.flexible {
  flex: 1 0 auto;
  background-color: blue;
}

Le JSFiddle

cssflexbox
16
Romeno

Pour obtenir le résultat attendu, spécifiez également la largeur de la classe .flexible.

.flexible { 
            flex: 1 0 auto; 
            width:200px;
            background-color: blue; 
            Word-wrap:break-Word;
   }

http://codepen.io/nagasai/pen/LkJzLz

17
Naga Sai A

Avec flex: 1 0 auto dans .flexible, vous définissez les paramètres suivants:

  1. 1 est flex-grow et sa configuration est appelée à se développer
  2. 0 est flex-shrink donc vous définissez cela pour ne pas réduire
  3. auto est flex-basis qui dans ce cas fait référence à width qui est déterminé par le contenu de l'élément flex.

De plus, vous ne pouvez pas utiliser display: block dans flex-container, cela ne fonctionne pas. La valeur par défaut de flex-direction est row, vous pouvez donc la supprimer. Vous pouvez définir une largeur fixe de .inflexible comme ceci flex: 0 0 100px;. Et pour .flexible, vous pouvez simplement utiliser flex: 1 et cela prendra du reste de la largeur libre.

.flex-container {
  display: flex;
  width: 500px;
  background-color: green;
}
.flex-item {
  margin: 20px 0;
}
.inflexible {
  flex: 0 0 100px;
  background-color: red;
}
.flexible {
  flex: 1;
  background-color: blue;
}
<div class="flex-container">
  <div class="flex-item inflexible">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, cupiditate earum quos! Laborum quibusdam dolor temporibus corporis
  </div>
  <div class="flex-item flexible">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur modi sed ab voluptatum obcaecati repudiandae, quia architecto ipsa deserunt recusandae dolorum harum, aperiam sint, molestias iure voluptatem doloremque. In, rem.
  </div>
</div>

4
Nenad Vracar

Dans http://www.w3schools.com/cssref/css3_pr_flex-basis.asp il est écrit ce qui suit à propos de flex-basis: auto:

La longueur est égale à la longueur de l'élément flexible. Si l'élément n'a pas de longueur spécifiée, la longueur sera fonction de son contenu

flex-basis est la troisième propriété définie par la propriété abrégée flex.

Donc, si vous le définissez sur auto, la largeur maximale de .flexible div (en fonction de son contenu) sera la largeur du conteneur display: flex.

1
Simon Hänisch

Si je vous ai bien compris, je pense que vous avez mal compris une ou deux des valeurs flex. Considérez le code suivant:

http://codepen.io/anon/pen/NALvPw

Regarde ça:

.your-flex-item { /*(child, not container)*/
  flex: <flex-grow> <flex-shrink> <flex-basis>; 
}

Le vôtre était:

.inflexible {
  flex: 0 0 auto;
  width: 100px;
  background-color: red;
}

.flexible {
  flex: 1 0 auto;
  background-color: blue;
}

Si vous préférez le faire de cette façon, je vous suggère de modifier la valeur auto en fonction de la largeur de votre choix.

.inflexible {
  flex: 0 0 100px; /*auto changed to 100px*/
  width: 100px;
  background-color: red;
}

.flexible {
  flex: 1 0 auto; /* 1 0 auto will grow to whatever 'auto' will allow it to grow to. Put in size here for it to grow 'up-to' that size. */
  background-color: blue;
}
1
MassDebates

Mettez à jour flex: 1 0 auto; uniquement flex: 1 dans .flexible. Et supprimez flex: flex: 0 0 auto; de .inflexible.

Pour en savoir plus sur flexbox, consultez https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Mise à jour Fiddle .

.flex-container {
  display: flex;
  flex-direction: row;
  width: 500px;
  background-color: green;
}
.flex-item {
  display: block;
  margin: 20px 0;
}
.inflexible {
  flex: 0 0 auto;
  width: 100px;
  background-color: red;
}
.flexible {
  flex: 1 0 auto;
  background-color: blue;
}
.solution .flexible {
  flex: 1 0 0;
}
.question {
  margin-bottom: 20px;
}
<div class="question">
  <div class="flex-container">
    <div class="flex-item inflexible">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, cupiditate earum quos! Laborum quibusdam dolor temporibus corporis
    </div>
    <div class="flex-item flexible">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur modi sed ab voluptatum obcaecati repudiandae, quia architecto ipsa deserunt recusandae dolorum harum, aperiam sint, molestias iure voluptatem doloremque. In, rem.
    </div>
  </div>
</div>

<div class="solution">
  <div class="flex-container">
    <div class="flex-item inflexible">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, cupiditate earum quos! Laborum quibusdam dolor temporibus corporis
    </div>
    <div class="flex-item flexible">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur modi sed ab voluptatum obcaecati repudiandae, quia architecto ipsa deserunt recusandae dolorum harum, aperiam sint, molestias iure voluptatem doloremque. In, rem.
    </div>
  </div>
</div>

0
Pugazh