嵌套在 display:table 单元格中时，IE 不会删除 css 多列

Question

在我的项目中，我有一个 display:table-cell 包含一个 css 多列列表。调整容器大小时，我希望 table 的大小适合其父级宽度，并且 table-cell 在调整父级大小时扩展和收缩以适应父级容器。我希望多列列表随着容器宽度的缩小而删除列。这适用于 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;
}

我希望列表列在 window 缩小时从 3 减少到 2 再到 1。 Firefox、Safari 和 Chrome 的行为都符合我的预期。但是，IE 10+ 不会删除列。

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

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

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

更重要的是，如何让 table and/or 单元格适合 table 的容器？

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>

嵌套在 display:table 单元格中时，IE 不会删除 css 多列

IE doesn't drop css multi-columns when nested in display:table-cell

css

multiple-columns

internet-explorer-11

internet-explorer-10

css-tables