position: sticky allows sticky items to go off screen when scrolling

Question

I'm having trouble keeping sticky items in the viewport, after scrolling to the right they disappear:

* {
  box-sizing: border-box;
}

.viewport {
  position: relative;
  overflow: auto;
  width: 300px;
  height: 150px;
}

.cell {
  width: 80px;
  border: 1px solid red;
  padding: 5px;
  background: white;
}

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

.grid {
  display: grid;
  grid-template-columns: repeat(8, 80px);
}

<div class="viewport">
    <div class="grid">
      <div class="cell sticky">sticky</div>
      <div class="cell sticky" style="left: 80px">stick 2</div>
      <div class="cell">cell</div>
      <div class="cell">cell</div>
      <div class="cell">cell</div>
      <div class="cell">cell</div>
      <div class="cell">cell</div>
      <div class="cell">cell</div>
    </div>
</div>
  

I know it's possible to keep them in the viewport, for example Kendo do it - https://stackblitz.com/edit/react-jmfqqv?file=app/main.jsx

It's not to do with having a right property like they have (tested) and I can't figure out what they are doing to stop the items from disappearing?

How can I always keep the sticky items... sticky, regardless of the scroll position?