将图像调整为弹性方向:列 - 解释和修复?

Question

任务是将带有文本块的<img>放入具有指定高度的容器中。

文本块和图像的高度未确定。

经过几个小时的搜索和讨论，我的同事帮助我在包含图像的flexbox孩子上进行了黑客height: 100%;。

https://jsfiddle.net/d9kd9k/j0bxvLus/14/

.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>

你能解释一下为什么它有效吗？

为什么弹性框可以在没有"100%"黑客的情况下为容器宽度有限的flex-direction: row工作？

Answer 1

我认为不使用高度 100% 使用flex:1和overflow:auto是最好的选择，并将图像的高度限制为 100%。

.container .cell-image {
display: flex;
flex: 1;
overflow: auto;
}
.container .cell-image img {
height:100%
}