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 com

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

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;
  }
}