Question

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

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

IDEA是在较小的弹性项目增长

时显示零件图像

＆＃13;

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

＆＃13;

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

＆＃13;

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;。

我希望能帮到你！

将flex contianer height设置为等于最小flex项的高度

1 个答案: