Is there a way I could hide all elements on a page whose bounding box is not completely visible. 

I have list of table rows, where the containing element has a dynamic height, but with overflow hidden. 

Sometimes half of an item in a list overlaps the containing element boundaries, and I was hoping either through CSS or JavaScript that I can hide these. 

Hopefully, an image can explain this better. Here, I'd like to hide box 24. 

![overlapping element](https://i.stack.imgur.com/borhH.jpg)

One idea I have is to iterate over all elements, find its bounds, and check if they overlap the container bounds. This seems quite a heavyweight and messy way of doing it (especially as this is a scrolling list, and I'd have to calculate this every second). Is there a better way? 

Thanks, and let me know if I need to clarify anything?

**Update:**

I'd like this to be generic and work with different markup structures, but for a simple example of the code I'm using (in this case, I guess only the first would be shown):

```
<style>
  #parent {height: 100px; overflow: hidden; }
  .child {height: 75px;}
</style>

<div id='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>

```