Flex-basis auto, 100% and IE. Does not work. Bug or feature .. Which is correct?

Question

css

https://jsfiddle.net/kwoy4shm/
Open in IE and another browser. There are two flex boxes in the example.
The first one is a three-column layout with a two-column layout enclosed in a central box.
Below is an example of a two-column layout.
The bottom line is that a separate two-column layout works as it should.
It only shines by specifying flex-basis: 100% for the right column of a two-column layout - https://jsfiddle.net/kwoy4shm/1/.
Questions:
1. Is the layout correct and is it IE failing or am I doing something wrong?
2. Does it even make sense to specify auto for flex-elements, as I understand it, this is like setting the size of the container by content, but in the case of specifying flex-grow: 1, this is similar, in fact, to flex-basis: 100%. So?

Answer 1

This is an IE11 bug. Treated by specifying flex-basis, except for auto. Usually, either the desired value is set, or simply 100% as a kind of analogue of auto.
By the way, if you need to use it calc()together with flex-basis, then you need to write it separately (second example), and not as part of the flex.
Here are the different options that work in IE11:
You can also put 0% instead of 100% (with a percentage, not just zero) or 1px , but there were some bugs in this case in other browsers (in some version of Chrome, the text went beyond such a block, for example) .
If for some reason you need to do this only in IE11, then you need to wrap the code in this hack:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* Код тут будет работать только в IE10 и IE11 */
}