Question

我有一个div，其中包括另外两个div

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

父div具有最大高度，因此不能增长超过一定数量。但是两个子div可以具有任意大小（动态计算）。因此，如果子div的总高度大于父div的最大高度，则只需要显示其一部分。我的问题是我怎样才能确保首先将第二个div剪切，然后将第一个div剪切。换句话说，我需要看到比第二个孩子更多的第一个孩子div。

示例1：例如，如果父div的最大高度为100像素，第一个div的高度为120像素，第二个div的高度也为120像素，则总计为240像素。因此，我需要完全隐藏第二个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/

喜欢吗？

Answer 2

您只需要添加'overflow：hidden;'到父母的CSS。

尝试一下：

<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>

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

2 个答案: