Why isn't position:sticky with left:0 working inside a scrollable container?
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>
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;
}
<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>
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?