Flexbox 在 IE 10 和 11 中防止自动换行答案

【问题标题】：Flexbox preventing wordwrap in IE 10 & 11Flexbox 在 IE 10 和 11 中防止自动换行
【发布时间】：2017-05-12 23:12:23
【问题描述】：

我一直在尝试让 <div class="status_"> 容器中的文本在屏幕尺寸变小时换行。

这适用于 Chrome、FF、Safari 和 Edge，但不适用于 IE 10 和 11。

我查看了有关此主题的其他 StackOverflow 帖子，例如 IE11 flexbox preventing text wrapping?，但它并没有帮助解决我的问题。

在使用 flexbox 时，有没有办法让我的文本在 IE 中换行？

/* 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>

这是我的代码：http://codepen.io/maureenv/pen/VmNBwg

谢谢

【问题讨论】：

@Michael_B 感谢您的帮助。不幸的是，删除 flexbox 对我来说不是一个选项，因为
包含许多使用 flexbox 进行样式设置的子项（此处未显示）。我还尝试了您使用 flex-flow: wrap; 的建议。但这并没有在 IE 中换行。
试试这个：stackoverflow.com/q/35111090/3597276
对不起，我的意思是@Valius79 建议使用 flex-flow: wrap;
@Michael_B 谢谢你的链接。我尝试使用其他帖子中的建议，例如将flex-basis: 100% 或flex: 1 或width: 100% 添加到子元素，但它也不起作用。我还尝试将display: inline-flex 移动到包含 div 的 td 中，但这并没有解决问题。