Stretch height of boostrap 5.2.0 row/column to bottom of page

Question

I'm struggling to stretch the left navigation section to reach the bottom of the page and stay responsive. I'm using Bootstrap 5.2.0. I tried many solutions like h-100, flex-grow, min-vh-100m self-align: stretch. Nothing seems to do the trick.

Codepen: (You may have to increase the height of the output window to see what I mean) :

https://codepen.io/ma66ot/pen/KKQZXew

HTML

    <div class="col-md-3 col-lg-2">
      <div class="logo">
        <div>
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/300px-Circle_-_black_simple.svg.png" id="circle" alt="">
        </div>
      </div>
        <div class="row">
          <div class="col-md-12">
            <div class="navigation ">
              <div class="title-nav">
                <img src="./assets/verwaltung.png" alt="" id="verwaltung-logo">
              </div>
                
                <div class="button-container">
                  <ul>
                    <li><a href="home"><button type="button" class="btn btn-primary btn-lg btn-block">Übersicht</button></a></li>
                    <li><a href="trainerInnen"><button type="button" class="btn btn-primary btn-lg btn-block">TrainerInnen</button></a></li>
                    <li><a href="teilnehmerInnen"><button type="button" class="btn btn-primary btn-lg btn-block">TeilnehmerInnen</button></a></li>
                    <li><a href="gruppen"><button type="button" class="btn btn-primary btn-lg btn-block">Gruppen</button></a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-9 col-lg-10">
          <div class="mainfenster">
        </div>
      </div>    
    </div>
  </div>
</div>    

CSS

h2 {
  width:100%;
}

html button {
  border: 0;
  width: 100%;
}


html ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

html .container-fluid {
      padding: 1em;
    }

#circle{
  width: 100%;
  height: 100%;
}

#verwaltung-logo {
  width: 50%;
  height: 50%;
}
html .links {
  padding-right: 3em;
}

/* Navigation */
html .navigation {
  background: #FFA500;
  border-radius: 48px;
  padding: 1em;
  margin-top: 1em;
}

li {
   margin-top: 1em;
   margin-bottom: 1em;
}

.button-container{
  width: 80%;
  margin: auto;
}
.navigation a {
  color: white;
  text-decoration: none;
}

.mainfenster {
  background: #FF6E13;
  border-radius: 48px;
  overflow-y: scroll;
  height: calc(100vh - 2em);;
}

/* Hide scrollbar for Chrome */
.mainfenster::-webkit-scrollbar {
  display: none;
}

.mainfenster {

  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

}

.mainfenster button {
  border-radius: 10px !important;
}

Answer 1

As explained here anytime you want to fill or stretch the remaining height flexbox column direction and flex grow.

1. make the left column viewport height and use min-vh-100
2. also make the left column d-flex flex-column
3. use flex-grow-1 on the div you want to fill the remaining column height
4. finally, use h-100 on the navigation so it fills the height of its' parent

https://codeply.com/p/CqV3FF1x5L

<div class="container-fluid ">
    <div class="row">
        <div class="col-md-3 col-lg-2 min-vh-100 d-flex flex-column">
            <div class="logo">
                <div>
                    <img ...>
                </div>
            </div>
            <div class="row flex-grow-1">
                <div class="col-md-12">
                    <div class="navigation h-100">
                        <div class="title-nav">
                            <img .. >
                        </div>
                        <div class="button-container">
                            <ul>
                                <li><a href="home"><button type="button" class="btn btn-primary btn-lg btn-block">Übersicht</button></a></li>
                                <li><a href="trainerInnen"><button type="button" class="btn btn-primary btn-lg btn-block">TrainerInnen</button></a></li>
                                <li><a href="teilnehmerInnen"><button type="button" class="btn btn-primary btn-lg btn-block">TeilnehmerInnen</button></a></li>
                                <li><a href="gruppen"><button type="button" class="btn btn-primary btn-lg btn-block">Gruppen</button></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9 col-lg-10">
            <div class="mainfenster">
            </div>
        </div>
    </div>
</div>

Answer 2

First you need to fix height of left logo after that you need to add height to .navigation class and minus height of logo. see the below exmple

html .navigation { 
    height: calc(100vh - 200px);
}

In this above case your logo div height 200px.