Sticky first row and first column with no scroll overflow issues

Question

I've managed to create a sticky first row and first column, but I'm facing several issues.

.App{
   display: grid;
   overflow: scroll;
}
.grid {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
}
.row{
  display: flex;
  flex-direction: row;
}
.cell {
  width: 150px;
  height: 150px;
  flex-grow: 0;
  flex-shrink: 0;
}
.row-stick-top {
  position: sticky;
  z-index: 1;
  top: 0;
}
.cell-sticky-left {
  position: sticky;
  left: 0;
}

Here is my codesandbox

ISSUES Issues are on MOBILE displays. You can use this link to just view the output

1) As you scroll around, you'll notice that the square on the top left is not super sticky, as if its trying to catch up to the scroll. (I've tried this solution to no avail as well)

2) Overscroll...

• I've added in all the parents and even the scroll component .App:

overscroll-behavior: none;

• I've added overflow: hidden to the html, body, #root (as mentioned here)
• I've added -webkit-overflow-scrolling: touch as mentioned here
• I've tried body, html { position: fixed; }

My best guess now, is that I will need to put my first row and first column in different divs that don't scroll the same way as the content one does, and add an event listener for scroll...?