Flexible image sizing inside flexbox container - css

Question

I have a flexbox layout with an image and a caption (stacked). I'd like the image to take up all the available screen space, minus whatever space the caption needs below. Each image + caption combo should never exceed 100% of the viewport height.
The problem: I'm struggling finding a way to make the image not exceed the height of the available space. (In other words, the image will be larger than the available area, and it needs to scale down to respect the 100vh height set on <section> in my code example below.
Example of desired look
Image space outlined in red, caption space outlined in blue
Demo of problem
I added a max-height to the <img> so you can see the desired effect. (Remove max-height on the <img> to see the problem.)
Ultimately I need it to work like this without setting a literal max-height. Effectively it should be max-height: calc(100vh - (height of caption)), but I'm trying to do this without javascript.

Answer 1

From earlier comment
to keep flex children inside boundaries and use a max-size in %, you need to use overflow:hidden;, so the browser can calculate those size, else content boxes can overflow.
example:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
header {
display: flex;
justify-content: space-between;
background: lightblue;
padding: 1vmax;
}
section {
flex: 1;
overflow: hidden;
/* the browser will calculate size */
display: flex;
flex-direction: column;
align-items: center;
}
figure {
padding: 1vmin;
display: flex;
flex: 1 1 auto;
overflow: hidden;
/* the browser will calculate size */
}
img {
margin: auto;
max-height: 100%;
max-width: 100%;
flex-shrink: 1;
/* IE */
}
<header>
<h1>Logo</h1>
<nav>
Link Link Link
</nav>
</header>
<section>
<figure>
<img src="https://placekitten.com/1200/1200" />
</figure>
<aside>
<strong>Lorem Ipsum #1</strong>
<p>Vivamus a neque dui. Nunc tortor risus, mattis quis vulputate at, lacinia vel enim. Nam aliquet ipsum a mi malesuada, nec accumsan felis accumsan.</p>
</aside>
</section>