Text not wrapping in IE when container has flex-flow:column

Question

I have the following code in my CSS:

@media screen and (max-width:600px) {
    ...
    .container {
        display: flex; 
        flex-flow: column;
        max-width: 100%;
    }

    .container p { 
        display: block;
        max-width: 100%;
    }
    ...
}

This renders as expected in Chrome and Firefox, but in IE, the text fails to wrap, and each paragraph is rendered as a single line (which typically exceeds the width of the screen). There's a variety of solutions which address this situation when 'flex-flow' is not set to 'column'. Is there a way to fix the word-wrapping issue, under the condition that 'flex-flow' is set to 'column', and without setting a fixed width for either the container or child element?

Update:

The issue appears to pertain to the width of the element outside of the container. Here's a fiddle that illustrates what's going on.

HTML:

<div class='wrapper'>

   <div class='container'>
     <p>
        Lorem ipsum...
     </p>
     <br>
     <p>
        Lorem ipsum dolor sit amet...
     </p>
   </div>
</div>

CSS:

.container {
  display: flex; 
  flex-flow: column;
}

.container p { 
  max-width: 100%;
}

.wrapper {
   clear: both;
   float: left;
   max-width: 1000px;
   margin-top: 20px;
}

In the above example, the text will wrap in Chrome and Firefox, but will not wrap in IE. If, for example, the value of 'display' is changed to 'table', the paragraph text will wrap as expected in all browsers.

Flexbox is supported by IE > 9.http://caniuse.com/#search=flex — Michael Benjamin, Mar 09 '17 at 20:09
@Michael_B - I've created a jsfiddle, and it helped me get a better idea of what's going on, although I'm still not sure of why there's such a discrepancy between how IE handles things, as opposed to other browsers. I've updated my question accordingly, and posted the jsfiddle. — Boa, Mar 09 '17 at 21:01

Michael Benjamin · Accepted Answer · 2017-03-09T21:20:26.443

IE 10 and 11, which support flexbox, have many related bugs nonetheless.

In this particular case, IE is not recognizing the inherent width or display value of .container.

Here's a fix:

.wrapper {
  clear: both;
  float: left;
  max-width: 1000px;
  margin-top: 20px;
  display: flex;        /* NEW */
}

.container {
  display: flex;
  flex-flow: column;
  width: 100%;          /* NEW */
  border: 1px solid red;
}

.container p {
  max-width: 100%;
  border: 1px dashed black;
}

<div class='wrapper'>
  <div class='container'>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit nulla id odio tincidunt, in rutrum diam dapibus. Mauris et urna luctus turpis sollicitudin dictum venenatis eget massa. Suspendisse maximus lectus in nunc placerat, nec interdum
      massa iaculis. Nullam sit amet ex feugiat, cursus enim non, viverra lectus. Curabitur blandit risus sed dolor viverra, sit amet auctor metus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus
      placerat sollicitudin ligula, convallis mattis leo porttitor vitae. Praesent id metus id erat condimentum porta. Phasellus a sapien vel lacus imperdiet pellentesque sed at risus. Curabitur venenatis scelerisque augue, quis congue lorem feugiat eu.
      Suspendisse placerat elit non augue suscipit pretium.
    </p>
    <br>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit nulla id odio tincidunt, in rutrum diam dapibus. Mauris et urna luctus turpis sollicitudin dictum venenatis eget massa. Suspendisse maximus lectus in nunc placerat, nec interdum
      massa iaculis. Nullam sit amet ex feugiat, cursus enim non, viverra lectus. Curabitur blandit risus sed dolor viverra, sit amet auctor metus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus
      placerat sollicitudin ligula, convallis mattis leo porttitor vitae. Praesent id metus id erat condimentum porta. Phasellus a sapien vel lacus imperdiet pellentesque sed at risus. Curabitur venenatis scelerisque augue, quis congue lorem feugiat eu.
      Suspendisse placerat elit non augue suscipit pretium.
    </p>
  </div>
</div>

jsFiddle

Asons · Answer 2 · 2017-03-09T21:25:16.923

1

IE need the width to be set, and in your case on the wrapper.

Updated fiddle

.wrapper {
   clear: both;
   float: left;
   width: 100%;             /*  added  */
   max-width: 1000px;
   margin-top: 20px;
}

edited Mar 09 '17 at 21:25

answered Mar 09 '17 at 21:15

Asons

84,923
12
110
165

Text not wrapping in IE when container has flex-flow:column

2 Answers2

jsFiddle