I'll try to simplify my question:

I have a div container with a fixed height of 200px. Inside, I have a flexbox that shows vertical items. Each item has a FIXED height which should not change. I use overflow: hidden to prevent the last item to break out of that 200px. This works well.

This is what I have with overflow: hidden

This is what I have without overflow: hidden

But now, I'd like to take one step forward and prevent the rendering of the last item, if it's about to be cut and not displayed fully due to the container fixed height limitations and overflow: hidden

This is what I really want, show only those items which are not cut fully or partially by the overflow: hidden;

What's the best practice of achieving that? a kind of "make sure all items fit in their fixed height inside the fixed height component and if one doesn't fit, don't show it at all".

Using the lastest React. Probably doesn't matter but still.

I've made a small example here. https://jsfiddle.net/hfw1t2p0/

Basically, I want to keep enforcing the 200px max height of the flexbox, but have some kind of automation that kills all elements which are partially or fully invisible, like items "4" and "5" in the example.

Please note the 200px flexbox height, and 50px item height are just examples. In reality, I need a flexbox that can weed out any item that doesn't fit fully in it... the max height of the flexbox or minimum height of elements is unknown until runtime.