How to fix the height of a flex block without JS?

Question

css

Good day to all, layout gurus, please tell me how to be in such a situation?
I have a block with small content, it looks like this .
.text-block-3 is
stretched to full height to the end of the screen minus blocks right.
This block has content .text-block-4 .text-block-5 .text-block-6 the trouble starts when there is a lot of content.
Example - it stretches the block to the bottom of the screen, which should not be.
If .text-block-3force scrolling, then this does not solve the problem, the only thing that solves the problem is this max-height - but I don’t know which one to set it, because the block is pressed to the bottom of the screen on large monitors, and they are all different in height. I did not figure out how to calculate the height in CSS, because the height of the content from above is not known. and it is not correct to count from the size of the viewed area of ​​the VM.

Of course, there is a trick, to find out the height of the block in JS while it is empty, fix it in PX and then fill it with content, then it will scroll. But I would not want to do such a cast, I'm sure that there is a way in CSS how to do this behavior.

Briefly: if the content goes beyond the .text-block-3 blockit should scroll, the height of the content on top (container flex-grow-1 d-flex mt-2) [anything above] is not known. And the height should remain as in the first example.

Answer 1

flex: 0 0 400px;  /* Запрещает флексу расширяться */

What to do next - I think you'll understand. Yesterday's example for some girl

if the content goes beyond the .text-block-3 block it should scroll

Something is not visible so that you register the scroll somewhere and do it.

.text-block-3{
  max-height: 250px;
   background-color: #e0e843;
   flex: 0 0 500px;
   overflow: auto;  // * Если контент вылезет за 250px - появится скролл
   box-sizing: border-box;
   
}

flex: none
The size of an element is set according to its width and height properties. It is completely inflexible: it does not shrink or grow in relation to the flexible container. Equivalent to "flex: 0 0 auto".
https://developer.mozilla.org/ru/docs/Web/CSS/flex https://ru.stackoverflow.com/questions/1072570/
How...
Did you even try to google uncle?