Image in Lightbox hangs outside of container - html

Question

I build a responsive lightbox with flexbox-styling and the image in this lightbox doesnt fit in the container. (Its working fine if there is enough vertical space).
Here is a image to visualize the problem:
Thats the HTML code:
<div id="dialog-container">
<div id="dialog">
<div id="dialog-content">
<div class="image-wrapper">
<img src="https://spotwild.org/css/images/dist/header/header-07-1600.jpg">
</div>
<div class="thumbs">
Here are the thumbs
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
#dialog-container {
position: absolute;
width: 100%;
height: 100%;
background: black;
display: flex;
justify-content: center;
align-items: center;
}
#dialog {
max-width: 80%;
max-height: 80%;
background: white;
padding: 50px;
box-sizing: border-box;
position: relative;
}
#dialog-content {
display: flex;
flex: 1 1 100%;
flex-direction: column;
box-sizing: border-box;
height: 100%;
max-height: 100%;
}
.image-wrapper {
display: flex;
flex: 1 1 auto;
justify-content: center;
align-items: center;
min-width: 0;
min-height: 0;
}
img {
min-width: 0;
min-height: 0;
max-height: 100%;
max-width: 100%;
display: flex;
flex: 0 0 auto;
}
.thumbs {
background: #eee;
padding: 20px;
line-height: 25px;
box-sizing: border-box;
}
And here is the corresponding jsfiddle:
https://jsfiddle.net/ppkzt7m6/1/
Does somebody has a solution and an explanation why this happens?

Answer 1

The important part is to define the height on all the parent containers for the <img> element to make the percentage heights to work properly.
And use object-fit: cover; on the <img> element. Note, the current IE11 and Edge don't support it, works fine on all other modern browsers though, see the support tables.
jsFiddle
You can also do it without flexbox, the key is to set the image caption to absolute position
jsFiddle
I suggest to use background image if you do need to support IE, example:
jsFiddle
<div class="image-wrapper" style="background: url('https://spotwild.org/css/images/dist/header/header-07-1600.jpg') center / cover;">

Answer 2

add height in #dialog
#dialog {
background: white none repeat scroll 0 0;
box-sizing: border-box;
height: 100%;
max-height: 80%;
max-width: 80%;
padding: 50px;
position: relative;
}

Answer 3

USE THIS.
img {
display: block;
height: 100%;
max-height: 100%;
max-width: 100%;
min-height: 0;
min-width: 0;
width: 100%;
}
#dialog {
background: #ffffff none repeat scroll 0 0;
box-sizing: border-box;
height: 100%;
max-height: 80%;
max-width: 80%;
padding: 50px;
position: relative;
}