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.

"display:table" is due to other requirements. But perhaps that's not the best solution to those other requirements, so I'll ask about that in another question. But for the sake of discussion here, let's assume it's required. — arch-imp, Dec 03 '15 at 21:00
lol, I was in the middle of updating the question... :) See my comments to your answer. — arch-imp, Dec 03 '15 at 21:19
FYI, the solution you want require the need to set min/max width and as table cells have problems with that, there will be some quirky behavior as in IE not wrapping if not max width is set, hence the need to use viewport units instead of percent. Here is some reading about this issue: http://stackoverflow.com/questions/6426779/min-width-and-max-height-for-table-attributes — Asons, Dec 03 '15 at 21:44

Asons · Accepted Answer · 2015-12-03T21:32:32.390

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>

edited Dec 03 '15 at 21:32

answered Dec 01 '15 at 19:58

Asons

84,923
12
110
165

This is pretty close to what I need. I've updated the description to add an additional requirement that the table needs to fit it's parent width. – arch-imp Dec 03 '15 at 21:14
If this is the only solution I can find, I guess I could use javascript to inline the style of the table to fit the parent width. – arch-imp Dec 03 '15 at 21:15
One little quibble with this solution. As I shrink the window down, it seems the table extends outside it's container just a little bit. I'm still looking to get the table to fit completely within its container. See this fiddle: http://jsfiddle.net/kentho_98/y5bdLsgo/8/ – arch-imp Dec 03 '15 at 21:16
@arch-imp I updated my answer. Will this work for you? – Asons Dec 03 '15 at 21:33
It works if I change it to 99vw. I need to study up on vw units to understand why. I've not used them before. – arch-imp Dec 03 '15 at 21:45
@arch-imp Wonderful, check my other comment about the table cell min/max width issue. – Asons Dec 03 '15 at 21:46

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

1 Answers1