Why doesn't overflow work in .row (bootstrap4/flex)?

Question

css

The task is to build a grid of blocks, and in some cases the blocks must be larger than the cell size in height and run into the bottom row.
If one row - no problem. If there are several rows, the bottom row overlaps the enlarged cell. How to fix?
Working example
https://jsfiddle.net/6t9eru1d/10/

Answer 1

Try to explicitly set the height through height, add properties to the block:

overflow: hidden;
height: 170px;

https://jsfiddle.net/6t9eru1d/12/
Use Masonry.js if you want to remove the spacing between top and bottom row boxes.