-1

I have an html container element which has children, some of which are of the css class child-active.

The container should only be as tall as the largest active child. i.e. I want a container's max-height to always be the largest height of its children which are of the class child-active. (The reason I want this is because it would solve a css transition issue for me).

I want something like:

.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 this possible to do? Obviously I anticipate it will involve JavaScript.

Lucas Mumbo
  • 162
  • 8

2 Answers2

0

Does having the .container element to be display:flex not solve the problem?

Otherwise, container queries might be worth checking out.

cSharp
  • 2,884
  • 1
  • 6
  • 23
0

The simplest way would be to define the height of the child-active and use that same height as max-height for container, otherwise try playing around with max-height: max-content or max-height: auto or max-height: fit-content; Or use display: flex, define the heights of child and active child and that should be it.

.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>
zeljkoDe
  • 199
  • 4