IE 11 ignores min-width when using flex width

Question

I'm wondering if someone can help with this problem. I spent a lot of time on it and I'm all out of ideas, I've tried various suggestions from Google results, various combinations of flex grow and shrink, and couldn't get it working.

Demo: https://embed.plnkr.co/dIPh53W4DBkmTB51DCHp/ (open with IE 11)

Edit the code: https://plnkr.co/edit/dIPh53W4DBkmTB51DCHp?p=preview

In this case, in tablet view the <ul> flex width should be 90%, but in desktop view the <ul> flex width should only be 55%. However, we don't want the <ul> in desktop view to be shorter than it is in tablet view, so we set a min-width: 864px on <ul> for desktop view. So if you resize screen between 950px and 970px, the <ul> should no longer shrink suddenly.

This seems to work fine in all of Chrome, Firefox, Safari, and IE10.

But in IE11, the element is the wrong width and won't center as expected. I think it's because at 960px browser dimension, 55% would be max-width: 528px on the <ul> element, but it also has min-width: 864px. For some reason, IE11 renders this as being positioned to the left (instead of the center), with a width of 528px. So IE11 seems to ignore the min-width property, it doesn't handle it like the other browsers.

Code example:

index.html:

<div class="progress-bar">
  <ul>
    <li>Test item</li>
    <li>Test item</li>
    <li>Test item</li>
    <li>Test item</li>
  </ul>
</div>

style.css:

div {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

ul {
  display: flex;
  flex: 1 1 90%;
  max-width: 90%;

  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  display: flex;
  flex: 1 1 0%;
  justify-content: center;

  margin: 0;
  padding: 12px 0;
  list-style-type: none;
  background: #f7f7f7;
}

@media (min-width: 960px) {
  ul {
    min-width: 864px !important;
    flex-basis: 55%;
    max-width: 55%;
  }
}

IE 10 actually works fine in this case, so seems that IE 11 release might have broke something that was already working.

Any ideas how this can be resolved?

Answer 1

Since there seems to be no way to resolve this in IE11, I added a temporary media query to change the behavior for the specific dimensions.

In the case where we want 90% width up to 959px screen size, then 55% after 960px screen size -- I did calculation to determine that we want the <ul> element width to be 864px (960px x 90%) when screen is between 960px and 1570px (864px / 55%). So for this dimension range, I force a width and max-width of 864px.

Then for screens larger than 1571px, the flexbox 55% continues to apply again.

Using this method, I can completely ignore min-width.

@media (min-width: 960px) and (max-width: 1570px) {
  ul {    
    flex-basis: 100%;
    max-width: 864px;
    width: 864px;
  }
}