IE 在 display:table-cell 中嵌套时不会删除 css 多列

Question

在我的项目中，我有一个 display:table-cell 包含一个 css 多列列表。在调整容器大小时，我希望表格调整到其父级宽度，并且表格单元格在调整父级大小时扩大和缩小以适应父级容器。我希望多列列表随着容器宽度的缩小而删除列。这适用于 Firefox、Chrome 和 Safari，但不适用于 IE10+。

给定以下 HTML：

<div class="outer-container">
  <div class="inner-container">
    <div class="left-cell"></div>
    <div class="list-container">
      <ul class="columnized-list">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
      </ul>
    </div>
  </div>
</div>

还有下面的css：

* {
  box-sizing: border-box;
}

ul {
  list-style-type: none;
}

.outer-container {
  border: 1px solid green;
  width: 100%;
}

.inner-container {
  display: table;
  border: 1px solid black;
}

.left-cell {
  display: table-cell;
  border: 1px dashed blue;
  min-width: 5rem;
  max-width: 5rem;
}

.list-container {
  display: table-cell;
  border: 1px dashed red;
}

.columnized-list {
  -webkit-columns: 3 10rem;
  -moz-columns: 3 10rem;
  columns: 3 10rem;
  -webkit-column-rule: 1px solid black;
  -moz-column-rule: 1px solid black;
  column-rule: 1px solid black;
}

我希望当窗口缩小时列表列从 3 下降到 2 到 1。 Firefox、Safari 和 Chrome 的行为都符合我的预期。但是，IE 10+ 不会删除列。

我知道我不是唯一遇到这种情况的人。 CSS-Tricks 的评论者 Todd 描述了the same issue。

我想我可以理解为什么表格单元格正在扩展以填充内容，而 IE 不知道它是否应该缩小列表列或展开表格单元格。

什么是正确的行为？ IE 正确吗？还是所有其他浏览器？ CSS 规范是否指定了这种情况下的行为？

更重要的是，如何让表格和/或单元格适合表格的容器？

JSFiddle http://jsfiddle.net/kentho_98/y5bdLsgo/9/

更新增加了一些要求。

Answer 1

如果你给display: table-cell 一个min-width IE11 中的列/边缘中断。

这里是a fiddle demo

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
}

.outer-container {
  border: 1px solid green;
  width: 100%;
}

.inner-container {
  display: table;
  border: 1px solid black;
  width: 100%;
}

.left-cell {
  display: table-cell;
  border: 1px dashed blue;
  min-width: 5rem;
  max-width: 5rem;
}

.list-container {
  display: table-cell;
  border: 1px dashed red;
  max-width: calc(100vw - 5rem);
}

.columnized-list {
  -webkit-columns: 3 10rem;
  -moz-columns: 3 10rem;
  columns: 3 10rem;
  -webkit-column-rule: 1px solid black;
  -moz-column-rule: 1px solid black;
  column-rule: 1px solid black;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="left-cell"></div>
    <div class="list-container">
      <ul class="columnized-list">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
      </ul>
    </div>
  </div>
</div>