javascript - Div 包括另外两个总计大于父 div 的 div。需要显示更多的第一个 div 内容。

Question

我有一个包含另外两个 div 的 div

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

父 div 有最大高度，因此不能增长超过一定数量。但是两个子 div 可以有任何大小(动态计算)。因此，如果子 div 的集体高度大于父 div 的最大高度，我只需要显示部分子 div。我的问题是如何确保首先切割第二个 div，然后切割第一个 div。换句话说，我需要看到比第二个更多的第一个子 div。

示例 1: 比如父div的最大高度是100px，第一个div的高度是120px，第二个div的高度也是120px，那么一共就是240px。所以我需要完全隐藏第二个 div，只显示第一个 div 的 100px。

例子2: 或者如果第一个 div 高度是 80px，第二个 div 高度也是 70px，那么我需要显示第二个 div 的 20px 和第一个子元素的 80px。

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/

像这样？