将弹性容器高度设置为等于最小弹性项目的高度答案

【问题标题】：Set flex contianer height to equal the height of the smallest flex item将弹性容器高度设置为等于最小弹性项目的高度
【发布时间】：2016-07-04 14:21:54
【问题描述】：

我有以下代码，我想将容器高度设置为较小的弹性项目，以便我可以将额外的内容隐藏在较大的弹性项目中。

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

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>

【问题讨论】：

标签： css height flexbox

【解决方案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;。

希望对你有所帮助！

【讨论】：