html - Nested sticky element with zero left does not sticky

Question

Why my nested sticky element with left: 0 does not stick while the nested element with top: 0 sticks normally?

.scroll {
  width: 200px;
  height: 200px;
  border: 1px solid;
  overflow: auto;
}

.container {
  width: 600px;
  height: 1000px;
}

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

.sticky-top {
  position: sticky;
  top: 0;
}

<div class="scroll">
  <div class="sticky-top">sticky-top</div>
  <div class="sticky-left">sticky-left</div>
  <div class="container">
    <div class="sticky-top">sticky-top-nested</div>
    <div class="sticky-left">sticky-left-nested</div>
  </div>
</div>

Answer 1

Let's add some border and we will clearly see what is happening:

.scroll {
  width: 200px;
  height: 200px;
  border: 1px solid;
  overflow: auto;
}
.scroll > div {
  border:2px solid green;
}

.container {
  width: 600px;
  height: 1000px;
  border:2px solid red!important;
}
.container > div {
  border:2px solid green;
}

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

.sticky-top {
  position: sticky;
  top: 0;
}

<div class="scroll">
  <div class="sticky-top">sticky-top</div>
  <div class="sticky-left">sticky-left</div>
  <div class="container">
    <div class="sticky-top">sticky-top-nested</div>
    <div class="sticky-left">sticky-left-nested</div>
  </div>
</div>