100vh does not make the column 100% height

Question

I have this code:

.container {
  display: flex;
  height: 100vh;
}

.menu {
  widh: 150px;
  border: 2px solid red;
}

.body {
  width: 500px;
}

<div class="container">
  <div class="menu">
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
  <div class="body">
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi explicabo, neque animi non, illum aspernatur, quibusdam repellat quo voluptates quidem molestias aperiam? Nulla dolor optio iste explicabo consequuntur esse incidunt? Facere et, harum eaque,
      doloribus laudantium facilis debitis eum unde, numquam totam voluptatibus! Ratione dolor quos non numquam esse aut a, minima quod libero maxime rem veritatis molestiae, exercitationem sit. Odio, adipisci, voluptatum quam officia doloribus repellendus
      harum nam porro sequi blanditiis maiores! Esse repellat, quis dicta atque vitae aperiam commodi itaque veniam expedita eum dolorem enim aspernatur corporis quas? Expedita reiciendis odio enim nobis commodi iusto error fuga magni exercitationem ab
      necessitatibus dolorem quidem in voluptas minus quos excepturi aspernatur dignissimos, nostrum quae eius nihil vitae. Eum, eveniet distinctio. Ipsam, itaque. Dolores explicabo neque, voluptatem dolor recusandae minima quasi voluptates ullam sed
      accusamus reiciendis aperiam, omnis sint nemo unde! Neque quisquam ut qui in porro repellendus veniam beatae est! Quaerat aliquam voluptatem recusandae eius quam nesciunt quis molestiae, reiciendis id ad voluptatum aliquid repellat, deleniti incidunt
      delectus quos dolorem ipsam rem aut veniam vel dignissimos harum cum. Molestiae, tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore provident ad modi delectus blanditiis ex dolores in? Quae sapiente dolorem laboriosam consequatur
      tenetur, consequuntur rerum, blanditiis earum nisi qui odio. Quam, nam. Natus, veniam sint hic repellat debitis pariatur eos quia cum necessitatibus fugiat ratione inventore iusto unde enim quaerat earum facere est laudantium itaque? Tenetur laborum
      voluptatum qui excepturi? Illum quis impedit nulla, amet error fugit doloremque, explicabo voluptatem, iusto corrupti natus delectus nesciunt nisi cum? Repellendus quibusdam praesentium quisquam dicta accusamus pariatur voluptatum, explicabo optio
      a iste tenetur. Iure dolorem illo, voluptates dolorum quas nostrum nesciunt unde laudantium minus pariatur consectetur! Reiciendis, veritatis repudiandae, quasi suscipit distinctio dolorem delectus quibusdam magni explicabo eligendi recusandae est
      adipisci, neque enim? Ea asperiores debitis nostrum. Tempore, deleniti cum alias, quae quia molestias, repudiandae maiores mollitia nostrum quas sapiente quibusdam error id possimus beatae in veniam aliquam. Tenetur praesentium cumque provident
      facilis? Nobis voluptate, exercitationem voluptatem labore atque, aliquid neque maiores pariatur enim ducimus obcaecati placeat culpa excepturi illo necessitatibus? Nesciunt aliquam alias delectus adipisci voluptatibus debitis dolores! Aperiam magni
      est illum! Velit laudantium modi tempore distinctio reprehenderit sapiente est possimus officia facilis id sequi nulla facere dolores, vel tempora quas quidem repellendus, cumque neque veniam deserunt laborum quisquam! Blanditiis, eaque doloribus!
      Sint ut magni tenetur quae debitis quos nemo, expedita repellendus voluptas explicabo perferendis corrupti qui reiciendis maiores autem cum est unde dignissimos provident placeat? Eius eaque necessitatibus omnis officia minus. Nostrum, porro odio
      earum nobis nesciunt aliquid beatae quidem ullam veniam deleniti facere laborum itaque tenetur, perspiciatis, sequi omnis saepe assumenda. Minus odit molestias provident eaque quia facere recusandae ducimus?
    </div>
  </div>
</div>

Question: Even if i set the height of the container 100vh, the red section is not until the bottom if i scroll down. Why? and how to make the .menu section until the bottom when i scroll down?

Answer 1

set height: auto; instead of height: 100vh if you want to have it at full website height. 100vh is not 100% of the website height but 100% of the screens height.

.container {
  display: flex;
  height: auto;
}

.menu {
  widh: 150px;
  border: 2px solid red;
}

.body {
  width: 500px;
}

<div class="container">
  <div class="menu">
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
  <div class="body">
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi explicabo, neque animi non, illum aspernatur, quibusdam repellat quo voluptates quidem molestias aperiam? Nulla dolor optio iste explicabo consequuntur esse incidunt? Facere et, harum eaque,
      doloribus laudantium facilis debitis eum unde, numquam totam voluptatibus! Ratione dolor quos non numquam esse aut a, minima quod libero maxime rem veritatis molestiae, exercitationem sit. Odio, adipisci, voluptatum quam officia doloribus repellendus
      harum nam porro sequi blanditiis maiores! Esse repellat, quis dicta atque vitae aperiam commodi itaque veniam expedita eum dolorem enim aspernatur corporis quas? Expedita reiciendis odio enim nobis commodi iusto error fuga magni exercitationem ab
      necessitatibus dolorem quidem in voluptas minus quos excepturi aspernatur dignissimos, nostrum quae eius nihil vitae. Eum, eveniet distinctio. Ipsam, itaque. Dolores explicabo neque, voluptatem dolor recusandae minima quasi voluptates ullam sed
      accusamus reiciendis aperiam, omnis sint nemo unde! Neque quisquam ut qui in porro repellendus veniam beatae est! Quaerat aliquam voluptatem recusandae eius quam nesciunt quis molestiae, reiciendis id ad voluptatum aliquid repellat, deleniti incidunt
      delectus quos dolorem ipsam rem aut veniam vel dignissimos harum cum. Molestiae, tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore provident ad modi delectus blanditiis ex dolores in? Quae sapiente dolorem laboriosam consequatur
      tenetur, consequuntur rerum, blanditiis earum nisi qui odio. Quam, nam. Natus, veniam sint hic repellat debitis pariatur eos quia cum necessitatibus fugiat ratione inventore iusto unde enim quaerat earum facere est laudantium itaque? Tenetur laborum
      voluptatum qui excepturi? Illum quis impedit nulla, amet error fugit doloremque, explicabo voluptatem, iusto corrupti natus delectus nesciunt nisi cum? Repellendus quibusdam praesentium quisquam dicta accusamus pariatur voluptatum, explicabo optio
      a iste tenetur. Iure dolorem illo, voluptates dolorum quas nostrum nesciunt unde laudantium minus pariatur consectetur! Reiciendis, veritatis repudiandae, quasi suscipit distinctio dolorem delectus quibusdam magni explicabo eligendi recusandae est
      adipisci, neque enim? Ea asperiores debitis nostrum. Tempore, deleniti cum alias, quae quia molestias, repudiandae maiores mollitia nostrum quas sapiente quibusdam error id possimus beatae in veniam aliquam. Tenetur praesentium cumque provident
      facilis? Nobis voluptate, exercitationem voluptatem labore atque, aliquid neque maiores pariatur enim ducimus obcaecati placeat culpa excepturi illo necessitatibus? Nesciunt aliquam alias delectus adipisci voluptatibus debitis dolores! Aperiam magni
      est illum! Velit laudantium modi tempore distinctio reprehenderit sapiente est possimus officia facilis id sequi nulla facere dolores, vel tempora quas quidem repellendus, cumque neque veniam deserunt laborum quisquam! Blanditiis, eaque doloribus!
      Sint ut magni tenetur quae debitis quos nemo, expedita repellendus voluptas explicabo perferendis corrupti qui reiciendis maiores autem cum est unde dignissimos provident placeat? Eius eaque necessitatibus omnis officia minus. Nostrum, porro odio
      earum nobis nesciunt aliquid beatae quidem ullam veniam deleniti facere laborum itaque tenetur, perspiciatis, sequi omnis saepe assumenda. Minus odit molestias provident eaque quia facere recusandae ducimus?
    </div>
  </div>
</div>

Answer 2

You just do not need the height: 100vh; for the container, delete it, and it's ok, see snippet. the height will automatically fill the whole container as it is a flex container.

.container {
  display: flex;

}

.menu {
  widh: 150px;
  border: 2px solid red;
}

.body {
  width: 500px;
}

<div class="container">
  <div class="menu">
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
  <div class="body">
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi explicabo, neque animi non, illum aspernatur, quibusdam repellat quo voluptates quidem molestias aperiam? Nulla dolor optio iste explicabo consequuntur esse incidunt? Facere et, harum eaque,
      doloribus laudantium facilis debitis eum unde, numquam totam voluptatibus! Ratione dolor quos non numquam esse aut a, minima quod libero maxime rem veritatis molestiae, exercitationem sit. Odio, adipisci, voluptatum quam officia doloribus repellendus
      harum nam porro sequi blanditiis maiores! Esse repellat, quis dicta atque vitae aperiam commodi itaque veniam expedita eum dolorem enim aspernatur corporis quas? Expedita reiciendis odio enim nobis commodi iusto error fuga magni exercitationem ab
      necessitatibus dolorem quidem in voluptas minus quos excepturi aspernatur dignissimos, nostrum quae eius nihil vitae. Eum, eveniet distinctio. Ipsam, itaque. Dolores explicabo neque, voluptatem dolor recusandae minima quasi voluptates ullam sed
      accusamus reiciendis aperiam, omnis sint nemo unde! Neque quisquam ut qui in porro repellendus veniam beatae est! Quaerat aliquam voluptatem recusandae eius quam nesciunt quis molestiae, reiciendis id ad voluptatum aliquid repellat, deleniti incidunt
      delectus quos dolorem ipsam rem aut veniam vel dignissimos harum cum. Molestiae, tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore provident ad modi delectus blanditiis ex dolores in? Quae sapiente dolorem laboriosam consequatur
      tenetur, consequuntur rerum, blanditiis earum nisi qui odio. Quam, nam. Natus, veniam sint hic repellat debitis pariatur eos quia cum necessitatibus fugiat ratione inventore iusto unde enim quaerat earum facere est laudantium itaque? Tenetur laborum
      voluptatum qui excepturi? Illum quis impedit nulla, amet error fugit doloremque, explicabo voluptatem, iusto corrupti natus delectus nesciunt nisi cum? Repellendus quibusdam praesentium quisquam dicta accusamus pariatur voluptatum, explicabo optio
      a iste tenetur. Iure dolorem illo, voluptates dolorum quas nostrum nesciunt unde laudantium minus pariatur consectetur! Reiciendis, veritatis repudiandae, quasi suscipit distinctio dolorem delectus quibusdam magni explicabo eligendi recusandae est
      adipisci, neque enim? Ea asperiores debitis nostrum. Tempore, deleniti cum alias, quae quia molestias, repudiandae maiores mollitia nostrum quas sapiente quibusdam error id possimus beatae in veniam aliquam. Tenetur praesentium cumque provident
      facilis? Nobis voluptate, exercitationem voluptatem labore atque, aliquid neque maiores pariatur enim ducimus obcaecati placeat culpa excepturi illo necessitatibus? Nesciunt aliquam alias delectus adipisci voluptatibus debitis dolores! Aperiam magni
      est illum! Velit laudantium modi tempore distinctio reprehenderit sapiente est possimus officia facilis id sequi nulla facere dolores, vel tempora quas quidem repellendus, cumque neque veniam deserunt laborum quisquam! Blanditiis, eaque doloribus!
      Sint ut magni tenetur quae debitis quos nemo, expedita repellendus voluptas explicabo perferendis corrupti qui reiciendis maiores autem cum est unde dignissimos provident placeat? Eius eaque necessitatibus omnis officia minus. Nostrum, porro odio
      earum nobis nesciunt aliquid beatae quidem ullam veniam deleniti facere laborum itaque tenetur, perspiciatis, sequi omnis saepe assumenda. Minus odit molestias provident eaque quia facere recusandae ducimus?
    </div>
  </div>
</div>

Answer 3

100vh (viewport height) is equal to the height of the window in pixel. It does not mean, that it has a 100% height. Therefore, it behaves exactly as specified.

If you want to have a menu with a fixed position on the left side, you could e.g. position the menu fixed with a height of 100vh.

 position: fixed;
 height: 100vh;

You could also use flexbox to solve this problem. See e.g. Flexbox 100% height Issue

Answer 4

You can see the scrollbar because elements have their own margins and paddings that you didnt reset, that is why it is more the 100vh height.

You can fix this by reseting padding and margin for all elements.

You can do this by using *, which will target all elements on your webpage.

Simply add this on top of your css, and your scrollbar will go away :

*{

  margin : 0px;
  padding : 0px;

}

As for why your .menu is not untill bottom, it is very simple, your text on the right side becomes too big at a certain resolution, and because of that, it breaks out of 100vh height, while your .menu div still stays at 100vh.

Hope this helped, here is your solution for 100vh fix :)

*{

  margin : 0px;
  padding : 0px;

}

.container {
  display: flex;
  height: 100vh;
}

.menu {
  widh: 150px;
  border: 2px solid red;
}

.body {
  width: 500px;
}

<div class="container">
  <div class="menu">
    <ul>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </div>
  <div class="body">
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi explicabo, neque animi non, illum aspernatur, quibusdam repellat quo voluptates quidem molestias aperiam? Nulla dolor optio iste explicabo consequuntur esse incidunt? Facere et, harum eaque,
      doloribus laudantium facilis debitis eum unde, numquam totam voluptatibus! Ratione dolor quos non numquam esse aut a, minima quod libero maxime rem veritatis molestiae, exercitationem sit. Odio, adipisci, voluptatum quam officia doloribus repellendus
      harum nam porro sequi blanditiis maiores! Esse repellat, quis dicta atque vitae aperiam commodi itaque veniam expedita eum dolorem enim aspernatur corporis quas? Expedita reiciendis odio enim nobis commodi iusto error fuga magni exercitationem ab
      necessitatibus dolorem quidem in voluptas minus quos excepturi aspernatur dignissimos, nostrum quae eius nihil vitae. Eum, eveniet distinctio. Ipsam, itaque. Dolores explicabo neque, voluptatem dolor recusandae minima quasi voluptates ullam sed
      accusamus reiciendis aperiam, omnis sint nemo unde! Neque quisquam ut qui in porro repellendus veniam beatae est! Quaerat aliquam voluptatem recusandae eius quam nesciunt quis molestiae, reiciendis id ad voluptatum aliquid repellat, deleniti incidunt
      delectus quos dolorem ipsam rem aut veniam vel dignissimos harum cum. Molestiae, tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore provident ad modi delectus blanditiis ex dolores in? Quae sapiente dolorem laboriosam consequatur
      tenetur, consequuntur rerum, blanditiis earum nisi qui odio. Quam, nam. Natus, veniam sint hic repellat debitis pariatur eos quia cum necessitatibus fugiat ratione inventore iusto unde enim quaerat earum facere est laudantium itaque? Tenetur laborum
      voluptatum qui excepturi? Illum quis impedit nulla, amet error fugit doloremque, explicabo voluptatem, iusto corrupti natus delectus nesciunt nisi cum? Repellendus quibusdam praesentium quisquam dicta accusamus pariatur voluptatum, explicabo optio
      a iste tenetur. Iure dolorem illo, voluptates dolorum quas nostrum nesciunt unde laudantium minus pariatur consectetur! Reiciendis, veritatis repudiandae, quasi suscipit distinctio dolorem delectus quibusdam magni explicabo eligendi recusandae est
      adipisci, neque enim? Ea asperiores debitis nostrum. Tempore, deleniti cum alias, quae quia molestias, repudiandae maiores mollitia nostrum quas sapiente quibusdam error id possimus beatae in veniam aliquam. Tenetur praesentium cumque provident
      facilis? Nobis voluptate, exercitationem voluptatem labore atque, aliquid neque maiores pariatur enim ducimus obcaecati placeat culpa excepturi illo necessitatibus? Nesciunt aliquam alias delectus adipisci voluptatibus debitis dolores! Aperiam magni
      est illum! Velit laudantium modi tempore distinctio reprehenderit sapiente est possimus officia facilis id sequi nulla facere dolores, vel tempora quas quidem repellendus, cumque neque veniam deserunt laborum quisquam! Blanditiis, eaque doloribus!
      Sint ut magni tenetur quae debitis quos nemo, expedita repellendus voluptas explicabo perferendis corrupti qui reiciendis maiores autem cum est unde dignissimos provident placeat? Eius eaque necessitatibus omnis officia minus. Nostrum, porro odio
      earum nobis nesciunt aliquid beatae quidem ullam veniam deleniti facere laborum itaque tenetur, perspiciatis, sequi omnis saepe assumenda. Minus odit molestias provident eaque quia facere recusandae ducimus?
    </div>
  </div>
</div>