My mission is to place an <img> with text blocks above and below it inside a container of specified height.
The exact heights of the text blocks and image are unknown.
After extensive searching, my colleague provided a useful solution by using the hack height: 100%; on the flexbox child that contains the image.
Check out the code snippet here
.container {
display: flex;
height: 300px;
flex-direction: column;
}
.container .cell-image {
display: flex;
height: 100%;
}
.container .cell-image img {
max-width: 100%;
max-height: 100%;
}<div class="container">
<div class="cell cell-top">
text 1
</div>
<div class="cell cell-image">
<img src="https://via.placeholder.com/400x800" />
</div>
<div class="cell cell-bottom">
text 2
</div>
</div>Could you please explain why this solution works?
Also, I'm curious as to why flexbox functions properly without the "100%" hack for flex-direction: row when there's a restricted width on the container?