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

Question

In my project I have a display:table-cell containing a css multi-column list. When resizing the container, I would like the table to size to its parent width and table-cell to expand and shrink to fit within the parent container as the parent is resized. I would expect the multi-column list to drop columns as the container width shrinks. This works in Firefox, Chrome, and Safari, but not in IE10+.

Given the following 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>

And the following 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;
}

I expect the list columns to drop from 3 to 2 to 1 when the window shrinks size. Firefox, Safari, and Chrome all behave as I expect. However, IE 10+ doesn't drop columns.

I see I'm not the only one to encounter this. Commenter Todd over at CSS-Tricks describes the same issue.

I think I can understand why as the table-cell is expanding to fill contents and IE doesn't know if it should shrink the list columns or expand the table cell.

What is the correct behavior? Is IE correct? Or all the other browsers? Does the CSS spec specify behavior in this scenario?

More importantly, how do I get the table and/or cell to fit within the table's container?

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

Update Added a bit more requirements.

Answer 1

If you give the display: table-cell a min-width the columns in IE11 / Edge breaks.

Here is 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>