Il wrapping di parole in flexbox non sta rispettando il limite di larghezza del 100%

Ho 2 flexbox e una flexbox in una. Voglio che il testo si divida in più righe se è più grande di un genitore. Per qualche motivo funziona se ho inviato un valore fisso (es. 250px) come larghezza. Se imposto la larghezza al 100%, non si romperà in più righe.

Questo è il codice che ho:

#flexparent { display: flex } #flexchild1 { flex: 1; background-color: green; } #flexchild2 { flex: 1; background-color: red; display: flex; flex-flow: column } #flexchild3 { background-color: purple; width: 100%; word-wrap: break-word; } 
 
FLEXCHILD1
FLEXCHILD2
ThisisasuperlongsentenceLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtstLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtst

Questo è come lo voglio ma senza gli spazi nella lunga frase.

 #flexparent { display: flex } #flexchild1 { flex: 1; background-color: green; } #flexchild2 { flex: 1; background-color: red; display: flex; flex-flow: column } #flexchild3 { background-color: purple; word-wrap: break-word; } 
 
FLEXCHILD1
FLEXCHILD2
Thisisasuperlongsentence Loremipsum dolorsitametcon secteturadipisicingelitAsperi resnecessitatibusneu eodioImpeditistenes ciuntescorru ptiessecumrepudia ndaequidolor umIllumtempori busquoerrorcumqu eeximpeditmagnam Lore mipsumdo lorsitam etconsecteturadipisicing elitAsperioresne cessitatibusneueodi oImpeditisten esciuntescorruptiessecumrepudia ndaequidolorumIll umtemporibusq uoerrorc umqueeximpe ditmagn amtstLoremipsu mdolorsitametcon secteturadipisici ngelitAsperio resnecessitati busn

Ecco le code di codice che ho preparato per questo.

  • Il codice che ho: https://codepen.io/tomzz/pen/mpJMow
  • Come lo voglio ma senza la larghezza 250px: https://codepen.io/tomzz/pen/VyLMaW
  • Come lo voglio ma senza gli spazi nella frase: https://codepen.io/tomzz/pen/vpOeJp

Questo è un problema di larghezza minima , in cui un object flessibile non può essere più piccolo del suo contenuto.

Il valore predefinito di min-width è auto , e in questo caso succede all’elemento flex #flexchild2

Dagli una min-width: 0 e funzionerà.

Inoltre, la width: 100% non è necessaria, poiché gli elementi di align-items di una voce “colonna” flessibile si adattano automaticamente stretch e, in quanto tale, prendono automaticamente la larghezza completa del genitore e possono essere rimossi.

Stack snippet

 #flexparent { display: flex } #flexchild1 { flex: 1; background-color: green; } #flexchild2 { flex: 1; background-color: red; display: flex; flex-flow: column; min-width: 0; /* added */ } #flexchild3 { background-color: purple; /*width: 100%; removed */ word-wrap: break-word; } 
 
FLEXCHILD1
FLEXCHILD2
ThisisasuperlongsentenceLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtstLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtst

Il problema è che le larghezze basate sulla percentuale sono basate sul genitore immediato. Se il genitore immediato non ha width , il bambino non può sapere quale sia il 100% di un valore arbitrario. flex: 1 è una scorciatoia che contiene flex-grow: 1 , ovvero che #flex2 può crescere all’infinito senza impostare questo vincolo di width .

Le larghezze basate sulla percentuale sono in bolla fino al punto in cui è nota una width fissa, quindi tutto ciò che devi fare è impostare una width del 100% di #flexchild2 , in modo che #flexchild3 erediti la larghezza di #flexparent :

Questo può essere visto nel seguito:

 #flexparent { display: flex; } #flexchild1 { flex: 1; background-color: green; } #flexchild2 { flex: 1; background-color: red; display: flex; flex-flow: column; width: 100%; } #flexchild3 { background-color: purple; width: 100%; word-wrap: break-word; } 
 
FLEXCHILD1
FLEXCHILD2
ThisisasuperlongsentenceLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtstLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtst