html - Why isn't position:sticky with left:0 working inside a scrollable container?

Question

I have this problem - I have a container that contains some rows and in each row there is a sticky left column and then multiple other columns. Now in the example below this works for a little while but as you scroll the parent container the position sticky no longer works and it gets pushed along as you scroll.

.container {
  overflow-x: scroll;
}

.row {
  display: flex;
  width: 100%;
  
}

.item {
  min-width: 173px;
}

.sticky {
  min-width: 250px;
  position: sticky;
  left: 0;
  background: red;
}

<div class="container">
  <div class="row">
    <div class="item sticky">STICKY ROW 1</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 2</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 3</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>

Answer 1

Add border to better see the issue which is related to the use a block level element and the restriction of width:100% (not the one your are setting which is useless but the default behavior of block elements)

.container {
  overflow-x: scroll;
}

.row {
  display: flex;
  border:1px solid;
}

.item {
  min-width: 173px;
}

.sticky {
  min-width: 250px;
  position: sticky;
  left: 0;
  background: red;
}

<div class="container">
  <div class="row">
    <div class="item sticky">STICKY ROW 1</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 2</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="row">
    <div class="item sticky">STICKY ROW 3</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>