如何滚动显示粘性元素的内容？

Question

我在一个项目中使用CSS网格布局，该项目主要由标题，两个侧边栏（左右）和中间的主要内容组成。标头和两个侧边栏由粘性位置固定，而主要内容是可滚动的。问题是，直到完成主要内容的滚动，我才能看到左侧边栏中的所有剩余内容。我已经尝试过-y：auto;但什么也没发生。我既不想在左侧边栏上看到可见的滚动条。

由于我经常使用Lipum来显示问题，所以这是我的CodePen：https://codepen.io/fergos2/pen/MWgLqgL?editors=1100

下面还删除了嘴唇，找到了代码。

提前感谢您帮助这个新手！

.container {
  width: 100%;
  margin: 0 auto;
  background-color: #eee;
  
  display: grid;
  grid-template-rows: min-content 1fr;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 15px;
  
  grid-template-areas: "head head head"
                       "leftbar main rightbar";
  
  & > * {
    background-color: pink;
    color: #ggg;
    font-size: 20px;
    font-family: sans-serif;
  }
}

  .pd {
    padding: 15px;
  }
  
  .header {
    grid-area: head;
    
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
    
    box-shadow: 0 15px #eee;
  }
  
  .left-sidebar {
    grid-area: leftbar;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
   
    
    .left-inner {
      position: -webkit-sticky;
      position: sticky;
      top: 70px;
      
      // overflow-y: auto;
    }
    
    .box-1 {
      color: red;
      border: 1px solid purple;
      margin-bottom: 5px;
    }
    
    .footer {
      color: green;
      border: 1px solid purple;
    }
  }
  
  .main-content {
    grid-area: main;
  }

  .right-sidebar {
    grid-area: rightbar;

     display: flex;
     flex-direction: column;
     justify-content: flex-start;

      .box-2 {
        color: red;
        border: 1px solid purple;
        margin-bottom: 5px;
      }

      .box-3 {
        color: green;
        border: 1px solid purple;
      }
    
    .right-inner {
      position: -webkit-sticky;
      position: sticky;
      top: 70px;
    }
  }

<div class="container">
  <header class="header pd">Header</header>
  
    <div class="left-sidebar pd">
      <div class="left-inner">
        <div class="box-1 pd">
        Box-1
      </div>
      <footer class="footer pd">
        Footer
      </footer>
      </div>
    </div>
    
    <div class="main-content pd">
      Main content 
    </div>
     
    <div class="right-sidebar pd">
      <div class="right-inner">
              <div class="box-2 pd">
        Box-2
      </div>
      <div class="box-3 pd">
        Box-3
      </div>
      </div>
    </div>

  
</div>