Text in a flex container doesn't wrap in IE11

Question

Consider the following snippet:

In Chrome, the text is wrapping as expected:

But, in IE11, the text is not wrapping:

Is this a known bug in IE? (if yes, a pointer will be appreciated)

Is there a known workaround?

---

This similar question doesn't have a definite answer and an official pointer.

Answer 1

Add this to your code:

.child { width: 100%; }

We know that a block-level child is supposed to occupy the full width of the parent.

Chrome understands this.

IE11, for whatever reason, wants an explicit request.

Using flex-basis: 100% or flex: 1 also works.

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  width: calc(100% - 2px);       /* NEW; used calc to adjust for parent borders */
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

Note: Sometimes it will be necessary to sort through the various levels of the HTML structure to pinpoint which container gets the width: 100%. CSS wrap text not working in IE