IE 11 使用 display:flex child 忽略宽度

Question

我目前正在尝试解决 display: flex 和 Internet Explorer 11 的问题。我有一个固定宽度的表格，其中有一个带有 display: flex 的 div。这会导致表格在 IE11 中被拉伸。我尝试使用 flex-wrap 属性，它根本不会改变 IE 中的行为，但也会破坏 chrome 中的布局。当您在 IE11 和 Chrome（或基本上任何其他浏览器）中打开它时，我将代码分解为下面的 sn-p，它显示了问题。有谁知道如何在 IE11 中实现 Chrome 的正确行为？

（初始片段）

table {
    width: 200px; 
    border: 1px solid #000;
}

.flex {
   display:flex;
}

.icon:before {
   content: "✆";
}

<table>
   <tr>
      <td>
         <div class="flex">
            <span class="icon"></span>
            <span class="content">Lorem Ipsum dolor sit amet Lorem Ipsum dolor and so on ...</span>
         </div>
      </td>
   </tr>
</table>

编辑 1： 在尝试了 Paulie_D 和 LGSon 的答案后，它会导致表格预定义列宽，而不是等待对于实际的内容宽度，这会导致一些文本溢出。我更新了下面的片段以显示这一点。能够用 LGSons 的答案重现它，目前正在深入挖掘 Paulie_D 的答案。

table {
    width:200px; 
    border: 1px solid #000;
    table-layout: fixed;
}

.flex {
   display:flex;
}

.icon:before {
   content: "✆";
}

<table>
   <tr>
      <td>
         <div class="flex">
            <span class="icon"></span>
            <span class="content">Lorem Ipsum dolor sit amet Lorem Ipsum dolor and so on ...</span>
         </div>
      </td>
      <td>
            <span class="content">LongWordWithoutWhitespace</span>
      </td>
   </tr>
</table>

编辑 2： 我能够重现 Paulie_D 解决方案的问题，请查看下面的 sn-p：

table {
    width: 90%; 
    border: 1px solid #000;
    table-layout: fixed;
}

.flex {
   display:flex;
}

.icon:before {
   content: "✆";
}

.content {
   flex-grow: 1;
   flex-shrink: 0;
   flex-basis: 0; 
}

<table>
   <tr>
      <td>
         <div class="flex">
            <span class="icon"></span>
            <span class="content">Lorem Ipsum dolor sit amet Lorem Ipsum</span>
         </div>
      </td>
      <td>
         <div class="flex">
            <span>Content here</span>
         </div>
      </td>
            <td>
         <div class="flex">
            <span>and_some_long_content_here</span>
         </div>
      </td>
   </tr>
</table>

Answer 1

这是因为 IE 不接受 auto 作为 flex-basis 的默认值。

如果您将其更改为 flex-basis:0，它将按预期工作。

table {
  width: 200px;
  border: 1px solid #000;
}

.flex {
  display: flex;
  /* flex-wrap: wrap; breaks the layout in Chrome, too */
}

.icon:before {
  content: "✆";
}

.content {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
}

<table>
  <tr>
    <td>
      <div class="flex">
        <span class="icon"></span>
        <span class="content">Lorem Ipsum dolor sit amet Lorem Ipsum dolor and so on ...</span>
      </div>
    </td>
  </tr>
</table>

Answer 2

IE 需要table-layout: fixed 一起玩。

table {
  width: 100px;
  border: 1px solid #000;
  table-layout: fixed
}

.flex {
  display: flex;
}

.icon:before {
  content: "✆";
}

<table>
  <tr>
    <td>
      <div class="flex">
        <span class="icon"></span>
        <span class="content">Lorem Ipsum dolor sit amet Lorem Ipsum dolor and so on ...</span>
      </div>
    </td>
  </tr>
</table>

---

问题编辑后更新

由于弹性项目min-width 默认为auto，它不会缩小超出其内容。通过使用min-width: 0，或者像下面的示例overflow: hidden（也会剪切文本，而min-width 不会），它将能够缩小到超出其内容的范围。

word-wrap: break-word 将使td 的内容包含长字。

table {
  width: 100px;
  border: 1px solid #000;
  table-layout: fixed;
}
td {
  border: 1px solid #000;
}

.flex {
  display: flex;
}

.icon:before {
  content: "✆";
}

td {
  word-wrap: break-word;
}
.content {
  overflow: hidden;
}

<table>
   <tr>
      <td>
         <div class="flex">
            <span class="icon"></span>
            <span class="content">Lorem Ipsum dolor sit amet Lorem Ipsum dolor and so on ...</span>
         </div>
      </td>
      <td>
            <span class="content">LongWordWithoutWhitespace</span>
      </td>
   </tr>
</table>