I'm trying to create a lightbox-like situation in which an image and various accessory UI are inside a container with a specified height, and they don't grow beyond that height. The image should be "contained" (you should be able to see the whole thing) and it should be as wide and tall as possible without forcing themselves or their sibling elements to grow beyond the container.
I thought this would be easy to do well with flexbox, but I'm having a tougher time than expected.
Here is a codepen of my attempt, and here is the source for convenience:
<div class="box">
<img src="http://placekitten.com/1600/2000">
<div class="buttons">
<button>one</button>
<button>two</button>
<button>three</button>
</div>
</div>
<style>
html, body {
margin: 0;
padding: 0;
}
.box {
display: flex;
flex-direction: column;
height: 100vh;
}
img {
object-fit: contain;
}
</style>
Note that even though the box div has a height of 100vh, the image winds up at a width of 100% and proportionally a height much taller than 100vh. If I were to set it to exactly 100vh, it would obey that, but the rest of the UI would still be forced below the configured height of the flex parent. I only want the image to grow into available space within the configured height of the parent.
Thanks.
