Prévenir flex éléments de déborder un conteneur

Comment puis-je faire mon flex élément (article dans cet exemple), ce qui a flex-grow: 1; pas à débordement, c'est flex parent/conteneur (main)?

Dans cet exemple article est juste le texte, si elle contient d'autres éléments (tables, etc).

CSS:

main, aside, article {
  margin: 10px;
  border: solid 1px #000;
  border-bottom: 0;
  height: 50px;
}
main {
  display: flex;
}
aside {
  flex: 0 0 200px;
}
article {
  flex: 1 0 auto;
}

HTML:

<main>
  <aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </aside>
  <article>don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y </article>
</main>

InformationsquelleAutor philfreo | 2016-03-26

css flexbox

Votre flex éléments ont

flex: 0 0 200px;
flex: 1 0 auto;

Qui signifie:

La première débutera à 200px de large.

Il n'y aura pas de croître ni décroître.
La seconde va commencer à la largeur donnée par le contenu.

Ensuite, si l'espace est disponible, il va croître à couvrir.

Sinon, il ne rétrécit pas.

Pour éviter horizontale de débordement, vous pouvez:

Utilisation flex-basis: 0 et puis laissez-les grandir avec un positif flex-grow.
Utilisez un positif flex-shrink laisser rétrécir si il n'y a pas assez d'espace.

Pour empêcher le débordement vertical, vous pouvez

Utilisation min-height au lieu de height pour permettre la flexion des éléments de croître plus si nécessaire
Utilisation overflow différent visible sur le flex éléments
Utilisation overflow différent visible sur le conteneur flex

Par exemple,

CSS:

main, aside, article {
  margin: 10px;
  border: solid 1px #000;
  border-bottom: 0;
  min-height: 50px; /* min-height instead of height */
}
main {
  display: flex;
}
aside {
  flex: 0 1 200px; /* Positive flex-shrink */
}
article {
  flex: 1 1 auto; /* Positive flex-shrink */
}

HTML:

<main>
  <aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </aside>
  <article>don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y </article>
</main>

il semble ne marchera pas si j'ai <table> à l'intérieur de la <article> même envelopper la table avec div et overflow: auto;
Si vous êtes aux prises avec de nombreux flex articles débordant conteneur (au lieu de texte), vous devez utiliser flex-wrap

InformationsquelleAutor Oriol

Au lieu de flex: 1 0 auto suffit d'utiliser flex: 1

CSS:

main, aside, article {
  margin: 10px;
  border: solid 1px #000;
  border-bottom: 0;
  height: 50px;
}
main {
  display: flex;
}
aside {
  flex: 0 0 200px;
}
article {
  flex: 1;
}

HTML:

<main>
  <aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </aside>
  <article>don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y </article>
</main>

Pour clarifier, flex: 1 est comme flex: 1 1 0.
Génial, merci! Je pense que j'ai eu la mauvaise mentale modal pour ce flex-shrink est alors, puisque je suppose que je ne le souhaitez réduire. Aussi @Oriol je pense que flex: 1 est flex: 1 1 auto.
Non, c'est flex: 1 1 0. Src: w3.org/TR/css-flexbox-1/#flex-property
Hmm, pourquoi ne developer.mozilla.org/en-US/docs/Web/CSS/flex afficher auto comme valeur initiale pour la 3ème param?
Chrome 68 montre 0% par défaut flex-base de la valeur lors de l'utilisation de flex: 1

InformationsquelleAutor Nenad Vracar

Une solution simple est d'utiliser overflow valeurs autres que visible de rendre le texte en flex base de la largeur de réinitialisation comme prévu.

Ici avec la valeur auto le texte passe comme prévu et le contenu de l'article n'a pas de débordement du récipient principal.
Aussi, l'article flex valeur doit avoir soit un auto base ET être en mesure de réduire OU, seulement se développer ET explicite 0 base

CSS:

main, aside, article {
  margin: 10px;
  border: solid 1px #000;
  border-bottom: 0;
  height: 50px;
  overflow: auto; /* 1. overflow not `visible` */
}
main {
  display: flex;
}
aside {
  flex: 0 0 200px;
}
article {
  flex: 1 1 auto; /* 2. Allow auto width content to shrink */
  /* flex: 1 0 0; /* Or, explicit 0 width basis that grows */
}

HTML:

<main>
  <aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </aside>
  <article>don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y </article>
</main>

Downvote: la peine d'expliquer? L'exécution de la snipper montre l'INTERFACE utilisateur prévu par l'OP?
C'est la bonne solution dans le cas où vous avez débordant de contenu, tels que des images ou du texte avec white-space: nowrap. Merci

InformationsquelleAutor Pandaiolo

2

Je sais que c'est vraiment la fin, mais pour moi, j'ai trouvé que l'application de flex-basis: 0; à l'élément qui l'a empêché de craquer.

InformationsquelleAutor faroukcharkas

Vous devez vous connecter pour publier un commentaire.