How to align row blocks in height?

Question

css

Source code: https://codepen.io/MaxStik/pen/yqJmmJ
With a height of 100% it runs over the next block

is there any way to align them without JS?
In the project I use flex + grid from bootstrap
Need it like this joxi.ru/n2YgRWnSoeNoar
Block .filter-items

Answer 1

.wrapper {
  display: flex;
  flex-direction: column;
}
.filter-items {
    flex: 1 1 auto;
}

well, you have .wrapper specified only for the first block, but it should be (he or some other class) specified for all.