Come evitare che oggetti flessibili si trabocchino dal contenitore?

Question

Come faccio a rendere il mio elemento flessibile (article in questo esempio), che ha flex-grow: 1;non overflow è flex genitore/contenitore (main)?

In questo esempio article è solo testo, anche se potrebbe contiene altri elementi, tabelle, ecc

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

I vostri articoli flex hanno

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

Ciò significa:

• La prima avrà inizio alle 200px ampia.

  Quindi non crescerà né si restringerà.

• Il secondo inizierà dalla larghezza indicata dal contenuto.

  Quindi, se c'è spazio disponibile, crescerà per coprirlo.

  Altrimenti non si restringe.

Per evitare overflow orizzontale, è possibile:

• Usa flex-basis: 0 e poi farli crescere con una positiva flex-grow.
• Utilizzare un valore positivo flex-shrink in modo che si riducano se lo spazio non è sufficiente.

per evitare overflow in verticale, è possibile

• Uso min-height invece di height per consentire gli elementi flessibili crescono più se necessario
• Usa overflow diverso da quello visibile sugli elementi flessibili
• Usa overflow diverso da quello visibile sul contenitore flessibile

Per esempio,

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>