Why Isn't Position:sticky With Left:0 Working Inside A Scrollable Container?

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

Solution 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;
}

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

Consider an inline level element using inline-flex to solve the issue. Add min-width:100% to make sure you cover at least 100% of width if the content is small.

.container {
  overflow-x: scroll;
}

.row {
  display: inline-flex;
  min-width: 100%;
  border:1px solid;
}

.item {
  min-width: 173px;
}

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

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

---

Some related questions:

Nested sticky element with zero left does not sticky

Why is my element not sticking to the left when using position sticky in css?