我有以下代码:
.parent {
/* This has a dynamic height */
display: flex;
gap: 1em;
padding: 1em;
background-color: lightblue;
}
.wrapper {
width: 150px;
/* This is a dynamic fixed width */
display: flex;
justify-content: center;
padding: 1em;
flex-direction: column;
overflow: hidden;
background-color: lightcoral;
}
.image-div {
height: 100%;
display: flex;
padding: 10px;
gap: 5px;
overflow: hidden;
background-color: lightgreen;
}
.image {
height: 100%;
max-height: 50px; /* Remove this so green box stays the same size and images grow to fill it */
}<div class='parent'>
<div class='wrapper'>
<div class='image-div'>
<img class='image' src="https://picsum.photos/50/200" />
<img class='image' src="https://picsum.photos/50/150" />
<img class='image' src="https://picsum.photos/50/100" />
</div>
</div>
<div class='wrapper'>
<span> This </span>
<span> text </span>
<span> should </span>
<span> dictate </span>
<span> dictate </span>
<span> max </span>
<span> height </span>
</div>
<div class='wrapper'>
<span> Small text </span>
<span> doesn't matter </span>
</div>
</div>我的目标是让图像符合绿色框的高度(宽度并不重要，因为为了保持长宽比，它们会溢出，这是一个有意和重要的行为).但是，如果从图像中删除注释的max-Size，它会增长到实际大小，从而使父红色div增长到适合它的大小:
有没有什么简单的方法可以得到这样的结果，即图像只是增长到适合可用的大小:
这一点很重要，因为蓝色矩形的高度根据所有其他红色矩形的内容而变化，绿色矩形是唯一不应该展开它的矩形.此外，考虑到问题的性质和使用它的上下文，我更喜欢在没有JS的情况下完成这项工作，只使用普通的CSS.