Svg contained in DIV does not follow "max-height: 100%"

Question

Take the example of the structure first.

.follow-window-size-container {
    height: 100vh;
    background-color: green;
}

container-of-svg {
    max-height: 100%;
}

container-of-svg svg {
    max-height: 100%;
}

<div class="follow-window-size-container">
    <div class="container-of-svg">
        <img src="http://imgh.us/EU_food_contact_material_symbol.svg" alt="">
    </div>
</div>

My goal is that the SVG image (along with your container) compresses and follows the same height as the follow-window-size-container (which follows the height of the window).

It would be right to work that way, I believe, since the max-height forces the element not to exceed a certain height. Strangely I’m not able to use it now...

Answer 1

The height of . container-svg needs to be 100%, I put display:block on img just to make sure. Check fiddle:

https://jsfiddle.net/3bnv9a2y/2/