css - 嵌套在显示 :table-cell 中时，IE 不会删除 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>