IE CSS bug: IMG original height affecting parent height

Question

I've got a PARENT flexbox div (which is also part of a column flexbox):

div.flex_block {
        width:100%;
        flex: 1 1 auto;
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;  
        padding-bottom:30px; 
}

It contains 2 children:

.flex_block  .content{
    max-width:none; /* override other code */
    flex: 0 1 50%;
}

.flex_block  .image{
    max-width:none; /* override other code */
    flex: 0 1 35%;
}

The first child has some text in it. The second has an oversized image, that is set to 100% width, so it shrinks to its container.

.flex_block  .image img{
    display:block;
    width:100%;
    height: auto;
}

It works as expected in Chrome, but in IE the original img's height seems to expand the PARENT container (even though it does shrink to fit its container). If I set the img height, the problem is fixed. AUTO doesn't fix it. I need this as a responsive design, obviously, so I don't wish to set the height in pixels.

Here is a visualisation of what happens:

I've also tried using inline elements with percentage widths instead of a flexbox, but the issue prevailed.

Answer 1

A possible solution to add to container:

flex-shrink: 0;

Or more specific to IE11:

-ms-flex-negative: 0;

This seems to have fixed my issue, but your results may vary.

I don't pretend to understand why it works, but it seems to be working for me. :)