0

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.

Portevent
  • 714
  • 3
  • 12
  • 34
  • The height of the parent will be the sum of the height of both the child elements. I don't see any point as to why you want the parent to be of the height equal to that of the second element. Additionally, if you would want the height of the parent to be equal to that of the second child (which, in case you succeed, will cause the second child to flow out of parent). Why not move the first child out of the parent? – Debargha Roy Jul 24 '20 at 17:28
  • I want to have my divs next to each other (that is why I use display: inline-block;) – Portevent Jul 24 '20 at 17:43

1 Answers1

-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>
Tejeshree
  • 942
  • 6
  • 9