Wie kann verhindert werden, dass Flex-Artikel überlaufen?

Question

Wie mache ich meine flex Artikel (article in diesem Beispiel), die flex-grow: 1;nicht Überlauf hat es flex Eltern/Container (main)?

In diesem Beispiel article ist nur Text, obwohl es andere Elemente enthält möglicherweise, Tabellen usw.

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>

Answer 1

Ihre flex Produkte haben

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

Das bedeutet:

• Die erste bei 200px breit beginnen.

  Dann wird es nicht wachsen noch schrumpfen.

• Der zweite beginnt mit der Breite des Inhalts.

  Dann, wenn es verfügbaren Speicherplatz gibt, wird es wachsen, um es abzudecken.

  Sonst wird es nicht schrumpfen.

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

• Verwenden flex-basis: 0 und sie dann mit einer positiven flex-grow wachsen lassen.
• Verwenden Sie eine positive flex-shrink, um sie schrumpfen zu lassen, wenn nicht genügend Platz vorhanden ist.

vertikalen Überlauf zu verhindern, können Sie

• Verwenden min-height statt height den flexiblen Elemente als sichtbar auf dem Flex Artikel
• Verwendung mehr, wenn nötig
• Verwendung overflow verschiedene wachsen lassen overflow anders als sichtbar auf dem flexiblen Behälter

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>