CSS Grig - Sticky Right column

I have implemented a layout using css Grid.

The left column should only scroll and the right one should be sticky or fixed. It's working fine but the scrollbar break the design there breaks the design. Its there any way that I can remove the scrollbar or any other solution? Because I know that is native of the browser but what can I do? (I also tried to change the design but its now supported by Firefox)

.container {
  height: 100vh;
  display: grid;
  grid-template-areas: "list content";
  grid-template-columns: 150px 1fr;
  grid-template-rows: auto;
  color: white;
}
.container .list {
  overflow: auto;
  grid-area: list;
  background-color: #131418;
  padding: 20px;
}
.container .list .items {
  margin-top: 15px;
  display: block;
}
.container .content {
  grid-area: content;
  background-color: #15161b;
  padding: 15px;
  position: sticky;
}

<div class="container">
<div class="list">
  <h5>
  Items
  </h5>
  <div class="items">
    <div class="item">
      <small>User name</small>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id efficitur arcu. Mauris ut nulla id lorem tempor malesuada id quis libero. Duis ornare massa at ex sodales blandit. 
      </p>
      <small>Made by ...</small>
    </div>
     <div class="item"  style="margin-top: 15px;">
      <small>User name</small>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id efficitur arcu. Mauris ut nulla id lorem tempor malesuada id quis libero. Duis ornare massa at ex sodales blandit. 
      </p>
      <small>Made by ...</small>
    </div>
  
  </div>
</div>
<div class="content">
  <h1>
  Hello world
  </h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id efficitur arcu. Mauris ut nulla id lorem tempor malesuada id quis libero. Duis ornare massa at ex sodales blandit. 
  </p>
</div>
</div>