title: How to fix the height of the flex block by the height of the parent block in this case?
body: <p>I have such a layout:</p>
  <p>Example: <a href="https://jsfiddle.net/woj693yd/1/" rel="nofollow noreferrer">https://jsfiddle.net/woj693yd/1/</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;main class="d-flex flex-column min-vh-100"&gt;
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
    Other content&lt;br&gt;
    Other content&lt;br&gt;
    Other content&lt;br&gt;
    Other content&lt;br&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container flex-grow-1 d-flex mt-2"&gt;
          &lt;div class="row flex-grow-1"&gt;
              &lt;div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 box"&gt;
                  &lt;div class="text-center fw-bold text-block-1"&gt;
                      &lt;span&gt;
                          header
                      &lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="text-block-2"&gt;
                  block 1
                  &lt;/div&gt;
                  &lt;div class="text-block-3"&gt;
                  &lt;!-- content --&gt;
                      &lt;div class="text-block-4"&gt;&lt;span&gt;sub block 2&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="text-block-5"&gt;&lt;span&gt;sub block 3&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="text-block-6"&gt;&lt;span&gt;sub block 4&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="text-block-4"&gt;&lt;span&gt;sub block 2&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="text-block-5"&gt;&lt;span&gt;sub block 3&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="text-block-6"&gt;&lt;span&gt;sub block 4&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="text-block-4"&gt;&lt;span&gt;sub block 2&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="text-block-5"&gt;&lt;span&gt;sub block 3&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="text-block-6"&gt;&lt;span&gt;sub block 4&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="text-block-4"&gt;&lt;span&gt;sub block 2&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="text-block-5"&gt;&lt;span&gt;sub block 3&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="text-block-6"&gt;&lt;span&gt;sub block 4&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="text-block-4"&gt;&lt;span&gt;sub block 2&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="text-block-5"&gt;&lt;span&gt;sub block 3&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="text-block-6"&gt;&lt;span&gt;sub block 4&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="text-block-4"&gt;&lt;span&gt;sub block 2&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="text-block-5"&gt;&lt;span&gt;sub block 3&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="text-block-6"&gt;&lt;span&gt;sub block 4&lt;/span&gt;&lt;/div&gt;
                  &lt;!-- content --&gt;
                  &lt;/div&gt;
                    &lt;div class="text-block-7"&gt;
                 The block is pressed to the very bottom
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I would like <em>.text-block-3</em> to have a <em>max-height</em> equal to the height of the row <em>.flex-grow-1</em> block minus the blocks: <em>header, text-block-2, text-block-7</em></p>
  <p>As a result, there should be such behavior: <a href="https://ibb.co/0QmfQ7Y" rel="nofollow noreferrer">gif</a> <a href="https://dropmefiles.com/2HGpb" rel="nofollow noreferrer">mirror one</a> <a href="https://transfiles.ru/6l5ee" rel="nofollow noreferrer">mirror two</a> (13MB)</p>
  <p><a href="https://i.stack.imgur.com/1dfsp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1dfsp.png" alt="enter image description here" /></a></p>
  <p>I can achieve the desired effect by setting the <em>.text-block-3</em> class properties <em>max-height</em> but I do not know the height of this block in css, <strong>and it is not right to use js in this situation.</strong></p>
  <p><strong>Question:</strong> How can I achieve the desired effect on css without using js?</p>