I have such a layout:
Example: https://jsfiddle.net/woj693yd/1/
MAIN{
background-color: antiquewhite;
}
.box {
display: flex;
flex-direction: column;
}
.text-block-1{
background-color: #43e8e5;
}
.text-block-2{
background-color: #43e846;
}
.text-block-3{
background-color: #e0e843;
flex-grow: 1;
overflow-y: scroll;
}
.text-block-4{
background-color: #e87a43;
}
.text-block-5{
background-color: #dcaae6;
}
.text-block-6{
background-color: #5e4f61;
}
.text-block-7{
background-color: #6255b5;
}<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<main class="d-flex flex-column min-vh-100">
<div class="container">
<div class="row">
Other content<br>
Other content<br>
Other content<br>
Other content<br>
</div>
</div>
<div class="container flex-grow-1 d-flex mt-2">
<div class="row flex-grow-1">
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 box">
<div class="text-center fw-bold text-block-1">
<span>
header
</span>
</div>
<div class="text-block-2">
block 1
</div>
<div class="text-block-3">
<!-- content -->
<div class="text-block-4"><span>sub block 2</span></div>
<div class="text-block-5"><span>sub block 3</span></div>
<div class="text-block-6"><span>sub block 4</span></div>
<div class="text-block-4"><span>sub block 2</span></div>
<div class="text-block-5"><span>sub block 3</span></div>
<div class="text-block-6"><span>sub block 4</span></div>
<div class="text-block-4"><span>sub block 2</span></div>
<div class="text-block-5"><span>sub block 3</span></div>
<div class="text-block-6"><span>sub block 4</span></div>
<div class="text-block-4"><span>sub block 2</span></div>
<div class="text-block-5"><span>sub block 3</span></div>
<div class="text-block-6"><span>sub block 4</span></div>
<div class="text-block-4"><span>sub block 2</span></div>
<div class="text-block-5"><span>sub block 3</span></div>
<div class="text-block-6"><span>sub block 4</span></div>
<div class="text-block-4"><span>sub block 2</span></div>
<div class="text-block-5"><span>sub block 3</span></div>
<div class="text-block-6"><span>sub block 4</span></div>
<!-- content -->
</div>
<div class="text-block-7">
The block is pressed to the very bottom
</div>
</div>
</div>
</div>
</main>I would like .text-block-3 to have a max-height equal to the height of the row .flex-grow-1 block minus the blocks: header, text-block-2, text-block-7
As a result, there should be such behavior: gif mirror one mirror two (13MB)
I can achieve the desired effect by setting the .text-block-3 class properties max-height but I do not know the height of this block in css, and it is not right to use js in this situation.
Question: How can I achieve the desired effect on css without using js?