flexbox中的自动换行不遵守100％宽度限制

Question

我有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;
}

<div id="flexparent">
      <div id="flexchild1">
        FLEXCHILD1
      </div>
      <div id="flexchild2">
        FLEXCHILD2
        <div id="flexchild3">
 ThisisasuperlongsentenceLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtstLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtst
        </div>
      </div>
    </div>

这就是我想要的，但长句子中没有空格。

#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;
}

<div id="flexparent">
      <div id="flexchild1">
        FLEXCHILD1
      </div>
      <div id="flexchild2">
        FLEXCHILD2
        <div id="flexchild3">
 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 
        </div>
      </div>
    </div>

这是我为此制作的代码笔。

• 我拥有的代码：https : //codepen.io/tomzz/pen/mpJMow
• 我想要的但是没有250px的宽度：https : //codepen.io/tomzz/pen/VyLMaW
• 我想要它如何但句子中没有空格：https : //codepen.io/tomzz/pen/vpOeJp

Answer 1

这是一个最小宽度的问题，其中弹性项目不能小于其内容。

的默认值min-width是auto，在这种情况下，它发生在flex项目上#flexchild2

给它min-width: 0，它将起作用。

另外，width: 100%不需要，因为flex“ column”项目的align-items默认值为stretch，因此会自动采用其父级的完整宽度，并且可以将其删除。

堆栈片段

#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;
}

<div id="flexparent">
      <div id="flexchild1">
        FLEXCHILD1
      </div>
      <div id="flexchild2">
        FLEXCHILD2
        <div id="flexchild3">
 ThisisasuperlongsentenceLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtstLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamLoremipsumdolorsitametconsecteturadipisicingelitAsperioresnecessitatibusneueodioImpeditistenesciuntescorruptiessecumrepudiandaequidolorumIllumtemporibusquoerrorcumqueeximpeditmagnamtst
        </div>
      </div>
    </div>