Misha Moroshko Misha Moroshko - 6 months ago 61
CSS Question

Why IE11 doesn't wrap the text in flexbox?

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.

Answer

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.

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