Text in a flex container doesn't wrap in IE11

Answer 1

Me too I encountered this issue.

The only alternative is to define a width (or max-width) in the child elements. IE 11 is a bit stupid, and me I just spent 20 minutes to realize this solution.

.parent {
  display: flex;
  flex-direction: column;
  width: 800px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  max-width: 800px;
  @media (max-width:960px){ // <--- Here we go. The text won't wrap ? we will make it break !
    max-width: 600px;
  }
  @media (max-width:600px){
    max-width: 400px;
  }
  @media (max-width:400px){
    max-width: 150px;
  }
}


  

    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  
  

    Lorem Ipsum is simply dummy text of the printing and typesetting industry