Text in a flex container doesn’t wrap in IE11

by

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

More Related Contents:

  1. Flex auto margin not working in IE10/11
  2. CSS flexbox not working in IE10
  3. element not working in Internet Explorer 11
  4. Icon fonts not loading in IE11
  5. CSS Blur in IE 11
  6. Detecting IE version using CSS Capability/Feature Detection
  7. How to create one vertical column in between rows in Flexbox [closed]
  8. Vertical Align Center in Bootstrap 4 [duplicate]
  9. Chrome / Safari not filling 100% height of flex parent
  10. Why is a flex item limited to parent size?
  11. Aligning grid items across the entire row/column (like flex items can)
  12. Make flex-grow expand items based on their original size
  13. How can I get FF 33.x Flexbox behavior in FF 34.x? [duplicate]
  14. CSS rotate property in IE
  15. How to write a CSS hack for IE 11? [duplicate]
  16. IE 6 & IE 7 Z-Index Problem
  17. How to align left last row/line in multiple line flexbox [duplicate]
  18. How to keep wrapped flex-items the same width as the elements on the previous row?
  19. What are the differences between flex-grow and width?
  20. Padding-bottom/top in flexbox layout
  21. CSS transitions with calc() do not work in IE10+
  22. CSS rounded corners in IE8
  23. Create a row of flexbox items with a max height defined by one child [duplicate]
  24. On IE CSS font-face works only when navigating through inner links
  25. How can I create multi columns from a single unordered list?
  26. CSS3 3D Transform doesn’t work on IE11
  27. IE not rendering CSS properly when the site is located at networkdrive
  28. Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?
  29. Horizontal masonry layout with flexbox CSS only [duplicate]
  30. IE6/IE7 css border on select element

Leave a Comment