flexbox min-width failing in IE and Edge

Question

I have some table that set width for elements so some columns will have at least some percent of a width of the container.

I want to use flexbox to center this table and set the minimum-width for it.

The goal is to have centered table with some minimum width for which some columns will have the same width (same ratio).

If some cells have longer texts then I don't care if ratio will broke (width of this column will be bigger then other). I just care that it has nice and same width of columns for common case (small amount of text data in cells)

I was able to came up with solution that works on Firefox and Chrome (link).

But for Edge and IE11 the table stretch as if it was not in flex container (try to comment display: flex; on Firefox or Chrome and the result is stretched table like on Edge.

Also it looks that sometime setting columns work (link2). But I don't see the pattern of when it break in Edge/IE11.

Here is more production example that I want to achieve (works in Chrome/Firefox, stretch in Edge/IE11): "production" table example.

Any ideas how to achieve what I want on Edge/IE11? (I put in bold what I want to achieve).

It would be good if I could keep using flexbox container (it might require more changes in my codebase) but I think I will be fine with deleting style=width:p% from <col> if that's necessary.

Michael Benjamin · Accepted Answer · 2018-12-04T01:49:04.820

The min-width rule is apparently being ignored in Edge / IE11.

There's an equivalent command that seems to work.

Instead of:

.inner {
    min-width: 800px
}

Use:

.inner {
    flex-basis: 800px; /* 1 */
    flex-shrink: 0;    /* 2 */
}

revised codepen

notes:

flex-basis is a substitute for width, in this case (see: flex-basis vs width)
flex-shrink: 0 ensures flex-basis / width cannot decrease below 800px (hence, both rules together emulate min-width)

flexbox min-width failing in IE and Edge

1 Answers1