How to stretch a block to the height of the parent block, provided that it contains blocks of unknown height?

Question

css

Good day to all, I wanted to ask the layout masters how to solve the following problem:
I have a parent flex block that stretches to the bottom of the page.
It has two blocks on top in my example, these are blocks with text [ .text-block-1 , .text-block-2 ] And there is a block with scrolling that should be stretched to the entire free height of the parent [ .text-block-3 ] , followed by a block that should be nested at the bottom of the [ .text-block-7 ] parent. When I apply h-100 (which is the standard bootstrap style) or height: 100%;it stretches, but because it considers the height of the parent, then more blocks below and above are added to the total height, and thus it turns out that it stretches by 100% + the height of other blocks in this parent block. Actually it looks like this: The


extra padding is just equal to the sum of the heights of other blocks...
What I would like to do:

I want .text-block-3 to take all the empty space in the parent in the middle in height, minus other blocks as in the picture . If it has more content than it can contribute, it should scroll.
Actually how to implement such behavior of the block?
Layout example: https://jsfiddle.net/s01pv78e/1/

Answer 1

For example like this: