Высота 100% не занимает все пространство, когда доступна прокрутка

Question

У меня левый navbar с высотой 100%, но при переполнении 100% высота не работает. Я пробовал дать body и html высоту 100% и min-height 100%. Я также пробовал задать высоту меню min-height: 100% и 100vh. Я прочитал много вопросов о StackOverflow, но ни одно из решений у меня не помогло. Вот код: Или codepen: shorturl.at/dgvFL

body {
  width: 100vw;
  height: 100vh;
  font-family: fontReg;
  overflow-x: hidden;
  margin: 0;
  font-family: Arial
}

.nav-bar {
  min-height: 100vh;
  width: 30%;
  background-color: rgba(246, 245, 243, 1);
  float: left;
  overflow: auto;
}


.nav-bar ul {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  padding: 5%;
}

.t2 {
  margin-bottom: 1000px;
  background-color: #dddddd;
  float: right;
  width: 200px;
  height: 200px;
}

.nav-bar ul li {
  margin: calc(100vh * .01);
}

.services {
  display: flex;
  flex-direction: column;
}

.service {
  width: 50%;
  margin: 20px auto;
  background-color: rgba(246, 245, 243, 1);
  box-shadow: 2px 2px 2px 2px rgba(240, 131, 0, 1);
  padding: 10px;
  transition: 1s;
}

.service h1 {
  color: orange;
  font-size: calc(100vw * .05);
  margin-top: 0;
}



a:link,
a:visited,
a:active {
  text-decoration: none;
  color: inherit;
}

<div class="nav-bar">

    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#"> All Blogs</a> </li>
      <li><a href="#">About & Contact</a>
      <li><a href="#">Create A Blog</a></li>

    </ul>
  </div>
  <div class="services">

    <div class="service">
      <h1>Lorem Ipsum</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse
        voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
      </p>
    </div>
    <div class="service">
      <h1>Lorem Ipsum</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse
        voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
      </p>
    </div>
    <div class="service">
      <h1>Lorem Ipsum</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse
        voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
      </p>
    </div>
    <div class="service">
      <h1>Lorem Ipsum</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse
        voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
      </p>
    </div>
  </div>

Answer 1

Используйте position: fixed, если вы хотите исправить положение панели навигации.

body {
  width: 100vw;
  height: 100vh;
  font-family: fontReg;
  overflow-x: hidden;
  margin: 0;
  font-family: Arial;
}

.nav-bar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  min-height: 100vh;
  width: 30%;
  background-color: rgba(246, 245, 243, 1);
  float: left;
  overflow: auto;
}

.nav-bar ul {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  padding: 5%;
}

.t2 {
  margin-bottom: 1000px;
  background-color: #dddddd;
  float: right;
  width: 200px;
  height: 200px;
}

.nav-bar ul li {
  margin: calc(100vh * .01);
}

.services {
  margin-left: 30%;
  display: flex;
  flex-direction: column;
}

.service {
  width: 50%;
  margin: 20px auto;
  background-color: rgba(246, 245, 243, 1);
  box-shadow: 2px 2px 2px 2px rgba(240, 131, 0, 1);
  padding: 10px;
  transition: 1s;
}

.service h1 {
  color: orange;
  font-size: calc(100vw * .05);
  margin-top: 0;
}

a:link,
a:visited,
a:active {
  text-decoration: none;
  color: inherit;
}

<div class="nav-bar">

  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#"> All Blogs</a> </li>
    <li><a href="#">About & Contact</a>
      <li><a href="#">Create A Blog</a></li>

  </ul>
</div>
<div class="services">

  <div class="service">
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
    </p>
  </div>
  <div class="service">
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
    </p>
  </div>
  <div class="service">
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
    </p>
  </div>
  <div class="service">
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, obcaecati rem. Numquam non quas sapiente esse voluptates voluptatibus, est voluptas amet deleniti vel temporibus minima rem corporis nisi expedita provident!
    </p>
  </div>
</div>