Sticky icons drawer scrollable both axis

App.tsx

function App() {
  return (
    <div className={styles.container}>
      {/*  */}
      {/*  */}
      <div className={styles.blockScroller}>
        {/*  */}
        {/*  */}
        <div className={styles.inlineScroller}>
          <div className={styles.drawer}>
            {[...Array(50).keys()].map((i) => (
              <div key={i} className={styles.drawerEntry}>
                <div className={styles.sticky}>{i}</div>
                <div>Hello World</div>
              </div>
            ))}
          </div>

          <div className={styles.scrollPadding} />
        </div>
      </div>
    </div>
  );
}

styles.module.scss

:root {
  --aside-width: 300px;
  --scroll-offset: 50px;
}

* {
  overscroll-behavior: none;
}

.container {
  border: 2px solid palevioletred;
  padding: 10px;
  height: 100%;
  width: 100%;
}

.block-scroller {
  height: 100%;
  width: 100%;
  // padding: 10px;
  border: 2px solid darkmagenta;
  overflow: hidden scroll;
}

.inline-scroller {
  // padding: 10px;
  height: fit-content;
  width: 100%;
  overflow-x: scroll;
  display: flex;
  flex-direction: row;
  overscroll-behavior: none auto;
  scroll-snap-type: x mandatory;
}

.drawer {
  scroll-snap-align: start;
  display: flex;
  gap: 10px;
  flex-direction: column;
  flex-shrink: 0;
  border: 2px solid cornflowerblue;
  width: var(--aside-width);
}

.drawer-entry {
  gap: 10px;
  display: flex;
  flex-direction: row;

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

.scroll-padding {
  scroll-snap-align: end;
  display: flex;
  flex-shrink: 0;
  width: calc(100% - var(--scroll-offset));
  border: 2px solid chocolate;
}