html - flexbox 中的自动换行不遵守 100% 宽度限制

Question

<分区>

Answer 1

这是一个 min-width 问题， flex 元素不能小于其内容。

min-width的默认值是auto，在这种情况下它恰好发生在 flex 元素#flexchild2

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

此外，不需要 width: 100%，因为 flex “列”元素的 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>