img { max-height: 100%; } causes img to exceed bounds

Question

Is this a Chrome bug?

Here's the HTML:

<div><img src="test.png"></div>

Here's the CSS:

* { box-sizing: border-box; }
div { height: 200px; padding: 75px 0 60px; }
img { max-height: 100%; }

Expected result: The img should have a height of 65px.

Result in Chrome (v. 27.0.1453.116) on Mac OS (v. 10.6.8): The img has height of 135px and "bleeds" into the parent div's padding. If I change the padding of the div to 50px 0, oddly it renders properly.

Play with this in a codepen: http://codepen.io/anon/pen/jhbKz

Screenshots:

First block has padding of 50px 0. Second block has padding of 75px 0 60px.

Firefox (correct result)

Chrome (wrong?)

Answer 1

Try adding a container to your Image with width and height of 100%. This will give you the same output on chrome and FF.

<div class="b">
    <div style='height:100%;width:100%;'>
        <img src="some image url">
    </div>
</div>

I cannot explain why this fix works currently, but I myself am trying to reason with it.