Sidebar with sticky elements at top and footer fixed at bottom

Question

I am trying to make a website layout with a header, sidebar, and main body. The main layout is a CSS grid. The sidebar has two elements in it:

• The first (.sidebar .container .top) is a navigation area that is sticky, i.e. remains pinned to the top-left of the viewport when the user scrolls past the header.
• The second (.sidebar .container .bottom) is a footer that should always be in the bottom left of the viewport.

In my code, the sticky navigation area works as intended, but I cannot get the .bottom element to do what I want:

• If I set .sidebar .container to have height 100vh (as I have done below), then the sidebar behaves correctly once you scroll down, but when the page loads, the .bottom text is partially cut off.
• If I set .sidebar .container to have height 100%, it stretches to match the length of the body text and the .bottom element isn't visible until you scroll all the way down.
• I cannot use .bottom { position: fixed; } because this resets the width of .bottom, but I want the width to respond dynamically (note the use of fr units and max-width in the body styling).

How can I get the text at the bottom of the sidebar to float to the bottom of the viewport?

Here is my code (pardon the long lorem ipsum—it is necessary to show the scrolling behavior):

body {
  display: grid;
  grid-template-columns: 1fr 5fr;
  max-width: 800px;
}

header {
  grid-column: 1 / 3;
  background-color: aqua;
}

.sidebar {
  background-color: greenyellow;
}

.sidebar .container {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
}

main {
  background-color: lightcoral;
}

<header>
  <h1>Page title</h1>
</header>
<div class="sidebar">
  <div class="container">
    <div class="top">This is the main sidebar text. It should be in the top left of the sidebar. The sidebar itself should run from the bottom of the header to the bottom of the, and once the user scrolls past the header, the sidebar should take up the full height of
      the page.</div>
    <div class="bottom">This is some secondary sidebar text. It should always be at the bottom left of the viewport. However, it is partially hidden from view when the page loads because the header pushes it below the viewport.</div>
  </div>
</div>
<main>
  <h1>
    Body text
  </h1>
  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil, id. Sapiente dolores mollitia quo sequi officiis ipsa corrupti minima fugiat rem laudantium natus soluta, ab non porro asperiores nostrum possimus. Lorem ipsum, dolor sit amet consectetur
    adipisicing elit. Officia voluptatibus, corporis tempore reiciendis provident delectus temporibus modi in nemo corrupti eum rerum animi, veniam vero? Adipisci voluptas voluptatum similique incidunt. Lorem ipsum dolor sit amet consectetur adipisicing
    elit. Minima quasi neque aliquam ea sed quia amet saepe illo placeat? Magnam, possimus a doloribus blanditiis culpa officia ad explicabo dolorem tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, velit! Vero eveniet fugit qui dignissimos
    incidunt. Debitis repellat pariatur cum totam laboriosam nesciunt, impedit excepturi, eaque veniam commodi odit reiciendis. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid voluptatem ut tempore debitis alias veniam minus natus nemo
    id dignissimos dicta nobis rerum dolorem iste, ab blanditiis. Quibusdam, tempore nisi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Est adipisci recusandae architecto explicabo numquam fuga repellat totam eligendi voluptatum, earum ab
    doloremque iste assumenda optio. Eveniet ipsa laboriosam rerum dolores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur quia velit ratione architecto distinctio nam atque pariatur reprehenderit. Praesentium debitis voluptatum rem
    blanditiis, doloremque assumenda quibusdam vero consectetur! Cum, ipsa. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat rerum tempore voluptatibus! Ut pariatur fugit facilis autem minus eum facere maxime laborum? Cumque dicta magnam,
    asperiores nam molestiae laboriosam cupiditate?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil, id. Sapiente dolores mollitia quo sequi officiis ipsa corrupti minima fugiat rem laudantium natus soluta, ab non porro asperiores nostrum possimus. Lorem ipsum, dolor sit amet consectetur
    adipisicing elit. Officia voluptatibus, corporis tempore reiciendis provident delectus temporibus modi in nemo corrupti eum rerum animi, veniam vero? Adipisci voluptas voluptatum similique incidunt. Lorem ipsum dolor sit amet consectetur adipisicing
    elit. Minima quasi neque aliquam ea sed quia amet saepe illo placeat? Magnam, possimus a doloribus blanditiis culpa officia ad explicabo dolorem tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, velit! Vero eveniet fugit qui dignissimos
    incidunt. Debitis repellat pariatur cum totam laboriosam nesciunt, impedit excepturi, eaque veniam commodi odit reiciendis. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid voluptatem ut tempore debitis alias veniam minus natus nemo
    id dignissimos dicta nobis rerum dolorem iste, ab blanditiis. Quibusdam, tempore nisi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Est adipisci recusandae architecto explicabo numquam fuga repellat totam eligendi voluptatum, earum ab
    doloremque iste assumenda optio. Eveniet ipsa laboriosam rerum dolores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur quia velit ratione architecto distinctio nam atque pariatur reprehenderit. Praesentium debitis voluptatum rem
    blanditiis, doloremque assumenda quibusdam vero consectetur! Cum, ipsa. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat rerum tempore voluptatibus! Ut pariatur fugit facilis autem minus eum facere maxime laborum? Cumque dicta magnam,
    asperiores nam molestiae laboriosam cupiditate?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil, id. Sapiente dolores mollitia quo sequi officiis ipsa corrupti minima fugiat rem laudantium natus soluta, ab non porro asperiores nostrum possimus. Lorem ipsum, dolor sit amet consectetur
    adipisicing elit. Officia voluptatibus, corporis tempore reiciendis provident delectus temporibus modi in nemo corrupti eum rerum animi, veniam vero? Adipisci voluptas voluptatum similique incidunt. Lorem ipsum dolor sit amet consectetur adipisicing
    elit. Minima quasi neque aliquam ea sed quia amet saepe illo placeat? Magnam, possimus a doloribus blanditiis culpa officia ad explicabo dolorem tempora! Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, velit! Vero eveniet fugit qui dignissimos
    incidunt. Debitis repellat pariatur cum totam laboriosam nesciunt, impedit excepturi, eaque veniam commodi odit reiciendis. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid voluptatem ut tempore debitis alias veniam minus natus nemo
    id dignissimos dicta nobis rerum dolorem iste, ab blanditiis. Quibusdam, tempore nisi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Est adipisci recusandae architecto explicabo numquam fuga repellat totam eligendi voluptatum, earum ab
    doloremque iste assumenda optio. Eveniet ipsa laboriosam rerum dolores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur quia velit ratione architecto distinctio nam atque pariatur reprehenderit. Praesentium debitis voluptatum rem
    blanditiis, doloremque assumenda quibusdam vero consectetur! Cum, ipsa. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat rerum tempore voluptatibus! Ut pariatur fugit facilis autem minus eum facere maxime laborum? Cumque dicta magnam,
    asperiores nam molestiae laboriosam cupiditate?
  </p>
</main>

Here is how it is cut off

Answer 1

I added this css to the bottom class:

    .bottom {
        bottom: 0;
        position: sticky;
    }

No part of this element will be below the viewport.