css - 将伸缩容器高度设置为等于最小伸缩元素的高度

Question

我有以下代码，我想将容器的高度设置为
较小的弹性商品，以便我可以在较大的弹性商品中隐藏多余的内容。

基本上：
较小的弹性商品有一些文字，
较大的flex项目只有一个图像。

IDEA将随着较小的flex项目中文本的增长而显示零件图像

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
.smaller-flex-item {
  order: 1;
}
.larger-flex-item {
  order: 2;
  overflow: hidden;
}

<div class="flex-container">
  <div class="smaller-flex-item">Unknown height</div>
  <div class="larger-flex-item">Known Height</div>
</div>

Answer 1

我会尽力回答这个问题。我只能想到两种方式。好吧，您可以尝试类似的方法：

.smaller-flex-item {
order: 1;
max-height: 200px;
}
.larger-flex-item {
order: 2;
max-height: 200px;
overflow: hidden;
}

您也可以将 .larger-flex-item从 max-height: 200px;更改为 max-height: inherit;。

希望对您有所帮助！