max-height 100% breaks out of 100vh

Question

I want to have a footer fixed at the bottom of my page, with the contents conforming to my view height.

Good: This CodePen has nicely contained contents. Notice that no matter how long the menu gets, the footer stays inside the red box.

Bad: This CodePen has contents where the red box breaks out of the viewport, and you need to scroll to the footer.

Can anyone suggest CSS which makes bad CodePen behave correctly?

Since StackOverflow requires code, here is the HTML and CSS for each CodePen:

Good HTML:

<div class="container">
  <div class="nav">
    <h1>Top Nav Bar</h1>
  </div>
  <div class="sidebar">
    <h2>Menu</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>
  <div class="main">
    <p>Hello World</p>
  </div>
  <div class="footer">This is the footer</div>
</div>

Good CSS:

body,html{ margin: 0; padding: 0; }
*{ margin: 0; padding: 0; box-sizing: border-box; }
.container{ display: grid; height: 100vh; border: 3px solid red;
  grid-template-areas: "nav     nav"
                        "sidebar main"
                        "footer  footer";
  grid-template-rows: auto
                      1fr
                      auto;
  grid-template-columns: 200px 1fr; }
.nav{ grid-area: nav; border-bottom: 1px solid #AAA; }
.sidebar{ grid-area: sidebar; border-right: 1px solid #AAA; max-height: 100%; overflow-y: scroll; }
.footer{ grid-area: footer;  text-align: center; background-color: lightgreen; }

Bad HTML:

<div class="container">
  <div class="nav">
    <h1>Top Nav Bar</h1>
  </div>
  <div class="sidebar">
    <h2>Menu</h2>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </div>
  <div class="main">
    <div class="main-main">
      <div class="area-left">
        <p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
      </div>
      <div class="area-right">
        <div>Large Area</div>
      </div>
    </div>
  </div>
  <div class="footer">This is the footer</div>
</div>

Bad CSS:

body,html{ margin: 0; padding: 0; }
*{ margin: 0; padding: 0; box-sizing: border-box; }
.container{ display: grid; height: 100vh; border: 3px solid red;
  grid-template-areas: "nav     nav"
                        "sidebar main"
                        "footer  footer";
  grid-template-rows: auto
                      1fr
                      auto;
  grid-template-columns: 200px 1fr; }
.nav{ grid-area: nav; border-bottom: 1px solid #AAA; }
.sidebar{ grid-area: sidebar; border-right: 1px solid #AAA; }
.footer{ grid-area: footer;  text-align: center; background-color: lightgreen; }
.main{ grid-area: main;  display: grid;
  grid-template-areas: "main-main";
  grid-template-rows: 1fr
                      auto }
.main-main{ grid-area: main-main;  display: grid; border-top: 1px solid #AAA;
  grid-template-areas: "area-left area-right";
  grid-template-columns: 200px 1fr; max-height: 100%; overflow-y: auto; }
.area-left{ grid-area: area-left;  max-height: 100%; overflow-y: scroll; }
.area-right{ grid-area: area-right;  max-height: 100%; overflow-y: scroll; }

Answer 1

Here is the fixed version of the Bad CSS - https://codepen.io/spandzcodepen/pen/xxbRYWq

body,html{ margin: 0; padding: 0; }
*{ margin: 0; padding: 0; box-sizing: border-box; }
.container{ display: grid; height: 100vh; border: 3px solid red;
  grid-template-areas: "nav     nav"
                        "sidebar main"
                        "footer  footer";
  grid-template-rows: auto
                      1fr
                      auto;
  grid-template-columns: 200px 1fr; }
.nav{ grid-area: nav; border-bottom: 1px solid #AAA; }
.sidebar{ grid-area: sidebar; border-right: 1px solid #AAA; }
.footer{ grid-area: footer;  text-align: center; background-color: lightgreen; }
.main{ grid-area: main;  display: grid;
  grid-template-areas: "main-main";
  grid-template-rows: 1fr
                      auto;
max-height: 100%; overflow-y: auto;}
.main-main{ grid-area: main-main;  display: grid; border-top: 1px solid #AAA;
  grid-template-areas: "area-left area-right";
  grid-template-columns: 200px 1fr;  }
.area-left{ grid-area: area-left;  max-height: 100%; overflow-y: scroll; }
.area-right{ grid-area: area-right;  max-height: 100%; overflow-y: scroll; }

Modified the bad css to switch the max height and overflow on the 'main' holder instead of 'main-main'.

Answer 2

You need to add overflow-y: scroll; and a semicolon in the property grid-template-rows to .main , just 2 lines of code but take a lot of effort to find :)), here is the full version of .main : https://codepen.io/loia5tqd001/pen/RwNoQEB

  .main {
    grid-area: main;
    display: grid;
    grid-template-areas: 'main-main';
    grid-template-rows: 1fr auto; /* You can also delete this line because there's only one child element */
    overflow-y: scroll;
  }