Text in a flex container doesn t wrap in IE11

Question

Consider the following snippet    x000D   x000D   parent   x000D    display  flex  x000D    flex-direction  column  x000D    width  400px  x000D    border  1px solid red  x000D    align-items  center  x000D    x000D   child   x000D    border  1px solid blue  x000D    x000D   lt div class  parent  gt  x000D     lt div class  child  gt  x000D      Lorem Ipsum is simply dummy text of the printing and typesetting industry x000D     lt  div gt  x000D     lt div class  child  gt  x000D      Lorem Ipsum is simply dummy text of the printing and typesetting industry x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    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

User · Answer

As Tyler has suggested in one of the comments here, using

max-width: 100%;

on the child may work (worked for me). Using align-self: stretch only works if you aren't using align-items: center (which I did). width: 100% only works if you haven't multiple childs inside your flexbox which you want to show side by side.

User · Answer

The only way I have 100  consistently been able to avoid this flex-direction column  bug is to use a min-width media query to assign a max-width to the child element on desktop sized screens    parent       display  flex      flex-direction  column       a media query targeting desktop sort of sized screens  media screen and  min-width  980px         child           display  block          max-width  500px   maximimum width of the element on a desktop sized screen           You will need to set naturally inline child elements  eg   lt span gt  or  lt a gt   to something other than inline  mainly display block or display inline-block  for the fix to work

User · Answer

The easiest solution I ve found is just adding max-width  100  to the element that s going out of bounds  If you re using it on something like a carousel remember to add a class with the max-width attribute

User · Answer

The proposed solutions did not help me with   child  width  100      since I had more complicated markup  However  I found a solution - remove  align-items  center    and it works for this case too    x000D   x000D   parent   x000D    display  flex  x000D    flex-direction  column  x000D    width  400px  x000D    border  1px solid red  x000D      align-items  center    x000D    x000D   child   x000D    border  1px solid blue  x000D    x000D   lt div class  parent  gt  x000D     lt div class  child  gt  x000D      Lorem Ipsum is simply dummy text of the printing and typesetting industry x000D     lt  div gt  x000D     lt div class  child  gt  x000D      Lorem Ipsum is simply dummy text of the printing and typesetting industry x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Why use a complicated solution if a simple one works too    child     white-space  normal

User · Answer

Somehow all these solutions didn t work for me  There is clearly an IE bug in flex-direction column   I only got it working after removing flex-direction   flex-wrap  wrap  align-items  center  align-content  center

User · Answer

I did not find my solution here  maybe someone will be useful    child-with-overflowed-text    word-wrap  break-all      Good luck

User · 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   Using flex-basis  100  or flex  1 also works    x000D   x000D   parent   x000D    display  flex  x000D    flex-direction  column  x000D    width  400px  x000D    border  1px solid red  x000D    align-items  center  x000D    x000D   child   x000D    border  1px solid blue  x000D    width  calc 100  - 2px            NEW  used calc to adjust for parent borders    x000D    x000D   lt div class  parent  gt  x000D     lt div class  child  gt  x000D      Lorem Ipsum is simply dummy text of the printing and typesetting industry x000D     lt  div gt  x000D     lt div class  child  gt  x000D      Lorem Ipsum is simply dummy text of the printing and typesetting industry x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    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

User · Answer

I had the same issue and the point is that the element was not adapting its width to the container   Instead of using width 100   be consistent  don t mix the floating model and the flex model  and use flex by adding this    child   align-self  stretch      Or    parent   align-items  stretch      This worked for me

User · Answer

grandparent     display  table      parent    display  table-cell   vertical-align  middle     This worked for me

User · Answer

Hi for me I had to apply the 100  width to its grandparent element  Not its child element s     grandparent       float left      clear  both      width 100     fix for IE11 text overflow     parent       display  flex      border  1px solid red      align-items  center      child       border  1px solid blue

User · Answer

I had a similar issue with overflowing images in a flex wrapper   Adding either flex-basis  100   or flex  1  to the overflowing child fixed worked for me

User · Answer

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       lt --- 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          lt div class  parent  gt     lt div class  child  gt      Lorem Ipsum is simply dummy text of the printing and typesetting industry    lt  div gt     lt div class  child  gt      Lorem Ipsum is simply dummy text of the printing and typesetting industry    lt  div gt   lt  div gt

[css] Text in a flex container doesn't wrap in IE11

Examples related to css

Examples related to internet-explorer

Examples related to flexbox

Examples related to internet-explorer-11