Why is object-fit not working with max-height container?

Question

I'm trying to place a video into a container which has 100% width and auto height respecting the aspect ratio but with max-height set. I want the video to fill the entire container even if the sides are cropped and to be centered both horizontally and vertically.

I'm using fit-object property but apparently it doesn't work with max-height.

I'll simplify it with an image. The result should be the same.

HTML

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

CSS

div {
    width: 100%;
    overflow: hidden;
}
img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

Now, if I add to div style height: 100px, it works. If I write max-height: 100px, it doesn't. Is this expected behaviour? If so, what can I do to make it work?

Here is jsFiddle: http://jsfiddle.net/1r4mLvLq/

Answer 1

height: 100%; works only if an ancestor element has an explicit height set.

You can accomplish that by adding this CSS:

html, body {
  height: 100%;
  margin: 0;
}

Updated Fiddle