flex-basis: auto doesn't work in IE11

Question

I have 3 divs with different width that I want to shrink to container using flexbox.

Made a fiddle: https://jsfiddle.net/easyNick/1m8ude39/14/

CSS looks like this:

.child {
 order: 0;
 flex-grow: 0;
 flex-shrink: 1;
 flex-basis: auto;
 min-height: auto;
 min-width: auto;
 align-self: auto;
 position: relative;
 display: block;
 padding: 0 0.25rem;
}

Works great in Chrome ets.

But IE 11 sees flex-basis as width and last div doesn't even fit to container:

.child {
 order: 0;
 flex-grow: 0;
 flex-shrink: 1;
 width: auto;
 min-height: auto;
 min-width: auto;
 align-self: auto;
 position: relative;
 display: block;
 padding: 0 0.25rem;
}

I've found some advices to set flex-basis to some percentage number. But 100% doesn't make what I need.

Setting particular values makes layout not flexible.

Any ideas of what may help?

Answer 1

Flex-basis wont work on the IE11 .

But you can target flex-basis property using this CSS rule. Try this one

_:-ms-fullscreen, :root .IE-FlexAuto {
  flex-basis: auto;
}