CSS error IE: original IMG height affecting parent height

Question

I have a PARENT flexbox div (which is also part of the flexbox column):

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 a text. The second has an image with an enlarged size, which is set to 100% width, so it is compressed 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 height extends the PARENT container (although it shrinks to fit its container). If I set the img height, the problem will be fixed. AUTO does not fix this. I need this as a responsive design, obviously, so I don't want to set the height in pixels.

Here is a visualization of what is happening:

I also tried using inline elements with percentage width instead of flexbox, but the problem prevailed.

Answer 1

:

flex-shrink: 0;

IE11:

-ms-flex-negative: 0;

, , , .

, , , , , .:)