html固定宽度也不自动换行,html – flexbox中的自动换行不符合100％宽度限制

参见英文答案 >

Why don’t flex items shrink past content size?                                    1个

我有2个flexbox和一个flexbox.

如果文本大于它的父级,我希望文本分成多行.出于某种原因,如果我发送一个固定值(例如250px)作为宽度,它就可以工作.如果我将宽度设置为100％,它将不会分成多行.

这是我的代码：

#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

这就是我想要的方式,但没有长句中的空格.

#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

这是我为此做的代码.