Verhindern Sie, dass flexible Gegenstände über einen Behälter laufen

75

Wie erstelle ich mein Flex-Element ( articlein diesem Beispiel), das das Flex-Element / den Flex-Container ( ) flex-grow: 1; nicht überlaufen muss main?

In diesem Beispiel articlehandelt es sich nur um Text, obwohl er möglicherweise andere Elemente ( tables usw.) enthält.

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;
}
<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>
Erweitern Sie das Snippet

css flexbox Philfreo
quelle
24
Ich hatte ein ziemlich ähnliches Problem mit einem auf einen Kindertisch reagierenden Überlauf des Flex-Elements. Die Lösung bestand darin min-width: 0;, das Flex-Element zu ergänzen .
Washington Guedes
7
Ich könnte dich küssen @WashingtonGuedes Ihre Erwähnung von min-width führte mich zu diesem CSS Tricks-Artikel, der beschreibt, wie / warum min-width das Problem löst css-tricks.com/flexbox-truncated-text
Josh Dean

Antworten:

74

Ihre Flex-Artikel haben

flex: 0 0 200px; /* <aside> */
flex: 1 0 auto;  /* <article> */

Das bedeutet:

  • Das <aside>wird um beginnen200px weitem beginnen.

    Dann wächst und schrumpft es nicht.

  • Das <article> beginnt bei der durch den Inhalt angegebenen Breite.

    Wenn dann Platz verfügbar ist, wächst dieser, um ihn abzudecken.

    Sonst schrumpft es nicht.

Um einen horizontalen Überlauf zu verhindern, können Sie:

  • Verwenden Sie flex-basis: 0und lassen Sie sie dann mit einem positiven wachsen flex-grow.
  • Verwenden Sie ein Positiv flex-shrink, damit sie schrumpfen, wenn nicht genügend Platz vorhanden ist.

Um einen vertikalen Überlauf zu verhindern, können Sie

  • Verwenden min-height statt height, damit die Flex-Elemente bei Bedarf stärker wachsen
  • Verwenden overflow andere als die auf den Flex-Elementen sichtbaren Elemente
  • Verwenden overflow andere als auf dem Flexbehälter sichtbar

Zum Beispiel,

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 */
}
<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>
Erweitern Sie das Snippet

Oriol
quelle
3
es scheint , wird nicht funktionieren , wenn ich <table>innerhalb der <article>sogar die Tabelle wickeln mit divundoverflow: auto;
VEE
1
Wenn Sie mit vielen Flex-Elementen zu tun haben, die über den Container laufen (anstelle von Text), sollten Sie Flex-Wrap verwenden
Jorjon
1
@vee Wenn Sie eine <Tabelle> haben, um mit der Lösung umzugehen, fügen Sie dem Flex-Kind, das die Tabelle enthält, die Mindestbreite 0 hinzu, wie oben von Washington Guedes erläutert.
Istopopoki
2
Es funktioniert nicht, es funktioniert nie, getestet auf mehreren Websites. Ihre Lösung ist völlig falsch und sollte entfernt werden.
Federico Schiocchet
1
@vee versuchen Einstellung flex: 1 1 0; min-width: 0;auf <article>- hatte das gleiche Problem mit <table>und es half; siehe dev.to/martyhimmel/…
Matt
9

Eine einfache Lösung besteht darin overflow, andere Werte zu verwenden , als visibledie Breite der Textflexbasis wie erwartet zurückzusetzen.

  1. Hier mit Wert wird autoder Text wie erwartet umbrochen und der Artikelinhalt läuft nicht über den Hauptcontainer.

  2. Außerdem muss der Artikelwert flexentweder eine autoBasis haben UND in der Lage sein, zu schrumpfen, ODER nur zu wachsen UND eine explizite 0Basis zu haben

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 */
}
<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>
Erweitern Sie das Snippet

Pandaiolo
quelle
Downvote: Mühe zu erklären? Wenn Sie den Snipper ausführen, wird die von OP erwartete Benutzeroberfläche angezeigt.
Pandaiolo
Dies ist die richtige Lösung für den Fall, dass Sie überlaufende Inhalte wie Bilder oder Text mit haben white-space: nowrap. Danke
Tigran
6

Anstatt flex: 1 0 autonur zu benutzenflex: 1

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;
}
<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>
Erweitern Sie das Snippet

Nenad Vracar
quelle
9
Zu klären flex: 1ist wie flex: 1 1 0.
Oriol
Super, danke! Ich glaube, ich hatte das falsche mentale Modal für das, was flex-shrinkdamals ist, da ich denke, ich möchte, dass es schrumpft. Auch @Oriol denke ich flex: 1ist flex: 1 1 auto.
Philfreo
@philfreo Nein, das ist es flex: 1 1 0. Src: w3.org/TR/css-flexbox-1/#flex-property
Ason
Hmm, warum tut developer.mozilla.org/en-US/docs/Web/CSS/flex zeigt autoals Anfangswert für den 3. param?
Philfreo
Chrome 68 zeigt 0% als Standard-Flex-Basis-Wert bei Verwendungflex: 1
Apolo
6

Ich weiß, dass dies sehr spät ist, aber für mich stellte ich fest, dass das Anwenden flex-basis: 0;auf das Element ein Überlaufen des Elements verhinderte.

Faroukcharkas
quelle
4

Wenn der Überlauf verpackt werden soll: flex-flow: row wrap

JeanAlesi
quelle
1

Es ist nicht für jede Situation geeignet, da nicht alle Elemente ein nicht proportionales Maximum haben max-widthkönnen.

Walf
quelle
0

max-width funktioniert bei mir.

aside {
  flex: 0 1 200px;
  max-width: 200px;
}

Durch Variablen von CSS-Vorprozessoren kann eine Hardcodierung vermieden werden.

aside {
  $WIDTH: 200px;
  flex: 0 1 $WIDTH;
  max-width: $WIDTH;
}

overflow: hidden funktioniert auch, aber ich versuche es in letzter Zeit nicht zu verwenden, da es die Elemente als Popups und Dropdowns verbirgt.

Takesi Tokugawa YD
quelle