Image container taking more space than it should - html

Question

How can I remove the empty space from the image container (blue)?
I need it to be compatible with ie11.
I don't want to hardcode the width/height of the container because images can be different aspect ratios and sizes.
main {
width: 100%;
height: 100%;
}
.video {
width: 100%;
display: flex;
max-height: 5em;
border: 1px solid red;
}
.video .image {
background: blue;
max-height: 100%;
max-width: 100%;
}
.video .image img {
max-width: 20vw;
max-height: 100%;
}
<main>
<div class="video">
<div class="image">
<img src="https://placehold.it/300/200">
</div>
<div class="content">
<p>title</p>
<p>description</p>
</div>
</div>
</main>

Answer 1

I find a strange thing: If we download the image and load it from the same server as the test page like this <img src="picture/200.png">, the following CSS code works well in IE:
main {
width: 100%;
height: 100%;
}
.video {
width: 100%;
display: flex;
height: 5em;
border: 1px solid red;
}
.video .image {
height: 100%;
}
.video .image img {
height: 100%;
}
I serve the image and the test page through localhost, you can see the result:
If you still want to use the online link as image source, you can try the following code without flexbox which can work well in IE:
main {
width: 100%;
height: 100%;
}
.video {
width: 100%;
height: 5em;
border: 1px solid red;
}
.video img {
overflow: hidden;
height: 100%;
float: left;
}
<main>
<div class="video">
<img src="https://placehold.it/300/200">
<div class="content">
<p>title</p>
<p>description</p>
</div>
</div>
</main>