Display images in flexbox at 100% height without scrollbar

I'm trying to display an app bar and three images in a column, that uses 100% of the height of the screen. The images are supposed to use the whole width of the column with the rest being cut off. I can get it working with just divs, but I'm having trouble when using images.

Here is a version to illustrate how it should look like. This has an app bar of height 50 and three "images" that fill the rest of the space:

https://codepen.io/Meerpohl/pen/zYxRKRV

And here is what I get with images. The images stretch the heights of my divs and ultimately of everything else, resulting in that scrollbar. Instead I need thin slices of the images.

https://codepen.io/Meerpohl/pen/eYmVdro

The code is the same in both cases. One just uses text instead images.

HTML:

<div class="root">

  <div class="appbar">
  This is a nice app bar
  </div>

  <div class="container">

      <div class="item">
        <img src="http://www.kleines-meerwasseraquarium.de/wp-content/uploads/2016/02/Zitronengrundel.jpg">
      </div>

      <div class="item">
        <img src="http://www.kleines-meerwasseraquarium.de/wp-content/uploads/2016/02/Zitronengrundel.jpg">
      </div>

      <div class="item">
        <img src="http://www.kleines-meerwasseraquarium.de/wp-content/uploads/2016/02/Zitronengrundel.jpg">
      </div>
  </div>
</div>

CSS:

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

.root {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.appbar {
  height: 50px;
  text-align: center;
  background-color: coral;
}

.container {
  flex: 1;
} 

.item {
  height:33.33%;
  overflow:hidden;
}

img {
  width: 100%;
  object-fit: cover;
}

I hope somebody can help me with this. Thanks in advance!