flexbox 中的自动换行不遵守 100% 宽度限制 [重复]

Question

我有 2 个 flexbox 和一个里面的 flexbox。 如果文本大于父级，我希望文本分成多行。出于某种原因，如果我发送一个固定值（例如 250 像素）作为宽度，它会起作用。如果我将宽度设置为 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 问题，其中弹性项目不能小于其内容。

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

给它min-width: 0 它会起作用的。

另外，不需要width: 100%，因为弹性“列”项的align-items 默认为stretch，因此会自动占用其父项的全宽，并且可以删除。

堆栈sn-p

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

Answer 2

问题在于基于百分比的宽度是基于直接父级的。如果直接父级没有width，则子级无法知道任意值的100% 是什么。 flex: 1 是包含flex-grow: 1 的简写，这意味着#flex2 可以无限增长而无需设置此width 约束。

基于百分比的宽度冒泡直到已知固定的width，因此您所要做的就是设置100% 的#flexchild2 的width 以及#flexchild3 继承#flexparent的宽度：

这可以在下面看到：

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

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

但是，请注意，由于您使用了两列，您可能希望将 width 指定为 100%，并将您的两列分别设置为 20% 和 80%。请注意，#flexchild3 仍然继承 width 的 #flexchild2 的 100%（即 80% 的 width 的 #flexparent）：

#flexparent {
  display: flex;
  width: 100%;
}

#flexchild1 {
  flex: 1;
  background-color: green;
  width: 20%;
}

#flexchild2 {
  flex: 1;
  background-color: red;
  display: flex;
  flex-flow: column;
  width: 80%;
}

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

希望这会有所帮助！ :)