Set height of a div to another div height [duplicate] - html

Question

This question already has answers here:
One flex/grid item sets the size limit for siblings
(6 answers)
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Closed 2 years ago.
I have a page like this :
<div id="parent">
<div id="childA">
List of some contents
</div>
<div id="childB">
The main content
</div>
</div>
#childA{
display: inline-block;
}
#childB{
display: inline-block;
}
I want to set the height of the parent div to the height of childB, but not childA.
If childA as a scrollBar in case it gets bigger than childB.
EDIT : I just realised I can approach the problem from a different angle. I hope it helps you understanding what I want. I need to set the height of a div (childA) according to the height of the div next to it (childB).
#childB{
overflow-y: scroll;
}
The height of both childs vary, but I want my parent's height equals to childB heigth.
I tried using table :
#parent{
display: table;
}
#childB{
display: table-row;
}
But childA keep increasing parent's height when it is bigger than childB
P.S. I know I can use JavaScript, but I would prefer not to use it.

Answer 1

I hope below example gives you some idea on how having some height and overflow-y on childA helps.
#parent {
display: flex;
border: 1px solid black;
}
#childA {
overflow-y: scroll;
height: 60px;
}
#childB {
}
<div id="parent">
<div id="childA">
List of some contents
List of some contents
List of some contents
List of some contents
List of some contents
</div>
<div id="childB">
The main content
The main content
The main contentThe main contentThe main content
The main content
The main content
The main content
The main content
</div>
</div>