Container exceeds its height 100vh

Question

I have a problem with the following code. Even though I specified height: 100vh, the body element has height = 100vh + height of the header element. How can I fix this?

body {
  height: 100vh; /* It should never be necessary to scroll the whole page. */
  margin: 0; /* Nothing should get added to the 100vh. */
}

header {
  background-color: orange;
}

main {
  display: flex;
  height: 100%; /* Occupy all space that is not occupied by the header. */
}

.column-1 {
  background-color: yellow;
  width: 25%;
  overflow-y: scroll; /* The only place where there should be a scrollbar. */
}

.column-2 {
  background-color: red; /* Is not actually visible. */
  width: 75%;
}

.column-2 div {
  background-color: green;
  width: 100%; /* Occupy all space that is available for column-2. */
  height: 100%; /* Same. */
}

<header>
    Header - Its height depends on the available width.
    There is a lot of stuff in here like foo foo foo foo foo foo foo foo...
  </header>
  <main>
    <div class="column-1">   
      <ul>
        <!-- This list may or may not cause scrolling. -->
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
        <li>li</li>
      </ul>
     </div>
     <div class="column-2">
       <div>
         Content
       </div>
     </div>
  </main>

Answer 1

Make the body element a flex container in column-direction.

body {
  display: flex;
  flex-direction: column;
}

Tell main to consume only available space.

main {
  flex: 1;
  min-height: 0;
}

Now header can be any height, and main won't overflow body.

The min-height rule adds flexibility, allowing flex items to override minimum size defaults. See the complete explanation see: Why doesn't flex item shrink past content size?

body {
  height: 100vh;
  /* It should never be necessary to scroll the whole page. */
  margin: 0;
  /* Nothing should get added to the 100vh. */
  display: flex;
  flex-direction: column;
}

header {
  background-color: orange;
}

main {
  flex: 1;
  min-height: 0;
  display: flex;
}

.column-1 {
  background-color: yellow;
  width: 25%;
  overflow-y: scroll;
  /* The only place where there should be a scrollbar. */
}

.column-2 {
  background-color: red;
  /* Is not actually visible. */
  width: 75%;
}

.column-2 div {
  background-color: green;
  width: 100%;
  /* Occupy all space that is available for column-2. */
  height: 100%;
  /* Same. */
}

<header>
  Header - Its height depends on the available width. There is a lot of stuff in here like foo foo foo foo foo foo foo foo...
</header>
<main>
  <div class="column-1">
    <ul>
      <!-- This list may or may not cause scrolling. -->
      <li>li</li>
      <li>li</li>
      <li>li</li>
      <li>li</li>
      <li>li</li>
      <li>li</li>
      <li>li</li>
      <li>li</li>
      <li>li</li>
      <li>li</li>
      <li>li</li>
      <li>li</li>
      <li>li</li>
      <li>li</li>
      <li>li</li>
      <li>li</li>
      <li>li</li>
      <li>li</li>
      <li>li</li>
      <li>li</li>
      <li>li</li>
    </ul>
  </div>
  <div class="column-2">
    <div>
      Content
    </div>
  </div>
</main>