Div including two other divs that are bigger than the parent div collectively. Need to show more of first div content.

Question

I have a div including two other divs

<div style="max-height:100px">
   <div> first div  </div>
   <div> second div </div>
</div>

The parent div has a maximum height so cannot grow more than a certain amount. But the two child divs could have any size (calculated dynamically). so I need to show only parts of the child divs if their collective height is bigger than the parent div's max height. My question is how can I make sure first the second div get cut first and then the first div. In other words, I need to see more of first child div than the second one.

Example1: For instance, if the parent div maximum height is 100 px and the height of the first div is 120px and the height of the second div is also 120px, then in total it is 240px. so I need to fully hide the second div and show only 100px of the first div.

Example2: or if the first div height is 80px and the second div height is also 70px, then I need to show 20px from the second div and 80px from the first child.

Answer 1

<div style="max-height:100px; overflow: hidden; background-color: lightgreen;">
   <div style="height: 80px; background-color: lightblue;">first div </div>
   <div style="height: 70px; background-color: pink;">second div</div>
</div>

https://jsfiddle.net/hxqdLp17/1/

Like this?

Answer 2

You only need to add 'overflow: hidden;' to the parent's CSS.

Try this:

<div style="max-height:100px; border: 1px solid #ccc; overflow: hidden;">
   <div style='height:120px;'> first div  </div>
   <div style='height:120px;'> second div </div>
</div>