是否有可能具有取决于特定元素高度的 css 属性?

Question

我有一个有子元素的html容器元素，其中一些是css类child-active。

容器应该只与最大的活动子级一样高，即我希望容器的max-height始终是其子项中属于类child-active的最大height。(我想要这个的原因是因为它可以为我解决 css 过渡问题)。

我想要这样的东西：

.container {
max-height: calc(max(/* all the heights of .container > .child-active*/));
}
.child {
...
}
.child-active {
...
}

<div class="container">
<div class="child"> the height of this content is ignored </div>
<div class="child child-active"> the height of this content sets the height of the container </div>
</div>

这可能做到吗？显然，我预计它将涉及JavaScript。

Answer 1

display:flex.container元素不能解决问题吗？

否则，容器查询可能值得查看。

Answer 2

最简单的方法是定义子活动的高度，并使用与容器的最大高度相同的高度，否则尝试使用最大高度：最大内容或最大高度：自动或最大高度：适合内容; 或者使用显示：flex，定义孩子和活跃孩子的身高，应该是这样。

.container {
display: flex;
border: 1px solid red;
}
.child {
height: 20px;
border: 1px solid blue;
}
.child-active {
height:40px;
border: 1px solid green;

}

<div class="container">
<div class="child"> the height of this content is ignored </div>
<div class="child child-active"> the height of this content sets the height of the container </div>
</div>