IE11 table layout breaks when ancestor has display: flex

Question

I have a simple table that lays out correctly in Chrome. But in IE11, the layout is broken when an ancestor element has display: flex.

The input boxes at the bottom of the page should be 10px from the bottom of the table headers. So to do this, I set margin-bottom on the header text itself to make room for the input boxes (filters), and then I absolutely position them to the bottom of the th elements, which have position:relative to anchor them.

Here is the link: https://codepen.io/nfknight/pen/KXyKdw

Any help is appreciated! Or I am curious if there are other ideas on how to accomplish a variable-height header-text with a fixed filter element. Both the header-text element and filter elements must be siblings.

Flexbox only has [**partial support**](http://caniuse.com/#search=flex) in IE 11. — Obsidian Age, Oct 03 '17 at 23:08

score 2 · Answer 1 · answered Oct 03 '17 at 23:50

It's not a problem with a flex ancestor. Removing it doesn't appear to make any difference in IE11 or Chrome. It looks like it's a rendering difference for absolute positioning.

You can work around the problem by making the columns flex containers.

revised codepen

.flexAncestor {
  display: flex;
}

tr {
  display: flex;     /* gives full height to children */
  height: 250px;     /* for demo only */
}

.col1 {
  display: inline-flex;
  flex-direction: column;
  width: 100px;
  background: pink;
}

.col2 {
  display: inline-flex;
  flex-direction: column;
  width: 100px;
  background: lightblue;
}

.ui-column-title {
  margin: auto;     /* flex auto margin; see below */
}

.ui-column-filter {
  align-self: center;
  margin-bottom: 10px;
  width: calc(100% - 15px);
}

<div class="flexAncestor">
  <div class="tableContainer">
    <table class="testDataTable">
      <thead>
        <tr>
          <th class="col1">
            <span class="ui-column-title">id</span>
            <input class="ui-column-filter" type="text" />
          </th>
          <th class="col2">
            <span class="ui-column-title">Wrapping column header inside flex ancestor throws layout off in IE11 </span>
            <input class="ui-column-filter" type="text" />
          </th>
        </tr>
      </thead>
    </table>
  </div>
</div>

Learn more about flex auto margins here:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

I decided to close as a dupe, as that dupe describes it well. Still, I answered with a solution I found, that didn't exist in the dupe, and +1 for yours. — Asons, Oct 04 '17 at 07:45
If I comment out display:flex on the ancestor, the problem does not exist. Note that codepen does not seem to always reload automatically in IE. — Nate K, Oct 05 '17 at 22:28

Asons · Answer 2 · 2017-10-04T08:06:12.423

As mention, it is not Flexbox related, it is based on the fact that the effect of position: relative on table elements is undefined, which is well described here:

Using Position Relative/Absolute within a TD?

In this case it turns out that pinning height: 100% on the way up the stack cures the absolute positioning issue, so if you add this rule it will work in IE as well.

.tableContainer, table, thead, tr, th { height: 100% }

Src: https://davidwalsh.name/table-cell-position-absolute

Stack snippet

.flexAncestor {
  display: flex;
}

.tableContainer {
  flex: 1 0 auto; /* not sure if needed. */
}

.tableContainer, table, thead, tr, th {            /*  added  */
  height: 100%
}

.ui-column-title {
  margin-bottom: 100px;
  display: inline-block;
  white-space: normal;
}

.ui-column-filter {
  position: absolute;
  bottom: 10px;
  left: 5px;
  width: calc(100% - 15px);
}

.testDataTable th {
  position: relative;
}

.col1 {
  width: 100px;
  background: pink;
}

.col2 {
  width: 100px;
  background: lightblue;
}

<div class="flexAncestor">
  <div class="tableContainer">
    <table class="testDataTable">
      <thead>
        <tr>
          <th class="col1">
            <span class="ui-column-title">id</span>
            <input class="ui-column-filter" type="text" />
          </th>
          <th class="col2">
            <span class="ui-column-title">Wrapping column header inside flex ancestor throws layout off in IE11 </span>
            <input class="ui-column-filter" type="text" />
          </th>
        </tr>
      </thead>
    </table>
  </div>
</div>

If I comment out display:flex on the ancestor, the problem does not exist. Note that codepen does not seem to always reload automatically in IE. Adding height:100% up the chain seems to work in the codepen example, but is not working in my app. So I am still tracing down where the issue is. — Nate K, Oct 05 '17 at 22:28
@NateK Since we provided 2 ways that make it work, we can't do more if the code you posted isn't a subset of the real one. Also, if to remove the `display: flex` on the Codepen, it still doesn't work, which proves it has nothing to do with Flexbox, which I also explained in the first part of my answer. — Asons, Oct 06 '17 at 06:16

IE11 table layout breaks when ancestor has display: flex

2 Answers2