Text in a flex container doesn’t wrap in IE11

by

Consider the following snippet:

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
}
<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>

In Chrome, the text is wrapping as expected:

enter image description here

But, in IE11, the text is not wrapping:

enter image description here

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.

13 Answers
13

Leave a Comment