Word-wrap in flexbox is not respecting 100% width limit [duplicate]

Answer 1

The problem is that percentage-based widths are based off of the immediate parent. If the immediate parent has no width, the child cannot know what 100% of an arbitrary value is. flex: 1 is shorthand that contains flex-grow: 1, meaning that #flex2 can grow infinitly without setting this width constraint.

Percentage-based widths bubble up to the point a fixed width is known, so all you have to do is set a width of 100% of #flexchild2 as well in order for #flexchild3 to inherit the width of #flexparent:

This can be seen in the following:

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

However, note that due to you using two columns, you'll probably want to give #flexparent a width of 100%, and set your two columns to 20% and 80% respectively. Note that #flexchild3 still inherits 100% of the width of #flexchild2 (which is 80% of the width of #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>

Hope this helps! :)

Answer 2

This is a min-width issue, where a flex item can't be smaller than its content.

The default value of min-width is auto, and in this case it happens to the flex item #flexchild2

Give it min-width: 0 and it will work.

Also, the width: 100% is not needed, since a flex "column" item's align-items default to stretch, and as such automatically take full width of its parent, and can be removed.

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

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