Dos divs llenan dinámicamente la altura de la ventana gráfica: html, css, flexbox

Estoy teniendo problemas para tratar de diseñar esta configuración. El #container debe ser exactamente el height del viewport, el #caption debería take as much height as it needs, y el img in #image debería fill the remaining height (manteniendo su relación de aspecto). Nunca debería #container exceder la ventana height.

<div id="container">
<div id="image">
<img src="/images/my-image.jpg" alt="my-image">
</div>
<div id="caption">
<p>
Some info about this image.<br>
Sometimes this could be two lines.<br>
Maybe even three.
</p>
</div>
</div>

Aquí hay un ejemplo de cómo esto funcionaría dinámicamente:

¿Alguna sugerencia? Yo también he jugado con flex y tablas, pero sin éxito, la página siempre termina superando la ventana gráfica. height.

Respuestas

puedes usar flexbox para eso

y es posible que necesite algunas consultas de medios.

body {
margin: 0
}
#container {
display: flex;
flex-direction: column;
height: 100vh
}
#caption {
flex: 1;
background: red
}
img {
display: block;
margin: auto
}

<div id="container">
<div id="image">
<img src="/images///lorempixel.com/300/500" alt="my-image">
</div>
<div id="caption">
<p>
Some info about this image.
<br>Sometimes this could be two lines.
<br>Maybe even three.
<br>
</p>
</div>
</div>