1

I've been trying to get my text in the <div class="status_"> container to wrap when the screen size is made smaller.

This works in Chrome, FF, Safari, and Edge but not in IE 10 and 11.

I've looked through other StackOverflow posts on this topic such as IE11 flexbox preventing text wrapping? but it hasn't helped solve my problem.

Is there anyway to get my text to wrap in IE while using flexbox? 

/* tr */
.row_content_style {
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

/* td */
.row_content_style .lst_td {
    vertical-align: middle;
    padding: 10px;
}

/* div inside td */
[class*=status_] {
    max-width: 1000px;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
<table width="100%" class="list_maincol" style="border-collapse: collapse;">
  <tbody>
    <tr class="row_content_style">
      <td class="lst_td">
        <div class="status_">
          text that should wrap. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper.            </div>
      </td>
    </tr>
  </tbody>
</table>

Here is a codepen with my code: http://codepen.io/maureenv/pen/VmNBwg

Thank you

Community
  • 1
  • 1
Maureen
  • 11
  • 2
  • @Michael_B thank you for your help. Unfortunately removing flexbox isn't an option for me because
    contains a lot of children (not shown here) that are using flexbox for styling. I also tried your suggestion to use flex-flow: wrap; but that didn't wrap the text in IE.
     – Maureen Dec 28 '16 at 16:49
  • try this: http://stackoverflow.com/q/35111090/3597276 – Michael Benjamin Dec 28 '16 at 16:51
  • Sorry, I meant @Valius79's suggestion to use flex-flow: wrap; – Maureen Dec 28 '16 at 16:54
  • @Michael_B Thank you for your link. I tried using the suggestions in that other post like adding `flex-basis: 100%` or `flex: 1` or `width: 100%` to the child element but it didn't work either. I also tried moving `display: inline-flex` to the td that contains the div but that didn't fix the issue. – Maureen Dec 28 '16 at 17:07

2 Answers2

0

Michael_B is right above. You could also try this:

-ms-flex-flow: wrap;
-webkit-flex-flow: wrap;
flex-flow: wrap;
Vcasso
  • 1,328
  • 1
  • 8
  • 14
  • Thank you for your suggestion. I tried adding that code to `[class*=status_]` but it didn't get my text to wrap. – Maureen Dec 28 '16 at 17:09
0

This helped me, IE 10

-ms-flex-direction: column
stardust
  • 593
  • 7
  • 9