I have a container in my HTML that contains child elements, some of which have the CSS class child-active.
I am trying to make the height of the container adjust dynamically based on the tallest active child. Essentially, I want the container's max-height to be equal to the height of its tallest child with the class child-active. This is to address an issue I am having with CSS transitions.
An example of what I am looking for:
.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>
Is it feasible to achieve this? It seems like JavaScript would be necessary.