Why element with `position: sticky` doesn't stick when there is a container between the element and the scrollable parent?

Question

In the following example, the second element doesn't stick. But, if I remove the .inner-container, it does stick as expected. Why? How could I make it stick with the .inner-container?

With .inner-container (doesn't stick)

.container {
  outline: 1px solid black;
  overflow-x: auto;
  width: 400px;
}

.first,
.third {
  width: 1000px;
  background: #ccc;
}

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

<div class="container">
  <div class="inner-container">
    <div class="first">
      Occaecat do velit est aliqua duis exercitation Lorem aute ex. Amet voluptate magna tempor amet. Nisi anim deserunt tempor ipsum irure ipsum proident sunt. Et in duis aute. Commodo ut labore veniam eu occaecat pariatur voluptate adipisicing ex duis.
    </div>
    <div class="second">
      Ea magna ipsum et. Adipisicing laborum consectetur quis velit Lorem dolor eu labore reprehenderit aliquip sit. Et consectetur duis aliqua laborum occaecat pariatur. Laborum velit ut laboris. Veniam ad non incididunt consectetur incididunt sunt nisi do
      elit. Sint qui consectetur magna labore. Do minim duis mollit cupidatat labore consequat excepteur consequat.
    </div>
    <div class="third">
      Cillum sit ea anim sunt qui. Laborum eiusmod velit id fugiat aute elit ut sint irure eiusmod ad ullamco culpa cupidatat. Ullamco fugiat occaecat ex laborum nisi laborum consectetur sint amet nulla in ad. Exercitation elit elit dolor eu ea labore. Deserunt
      nulla magna exercitation laborum nulla sint mollit in culpa laborum. Quis adipisicing pariatur consequat consequat et sunt ipsum labore amet ad esse nulla do.
    </div>
  </div>
</div>

Without .inner-container (sticks as expected)

.container {
  outline: 1px solid black;
  overflow-x: auto;
  width: 400px;
}

.first,
.third {
  width: 1000px;
  background: #ccc;
}

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

<div class="container">

  <div class="first">
    Occaecat do velit est aliqua duis exercitation Lorem aute ex. Amet voluptate magna tempor amet. Nisi anim deserunt tempor ipsum irure ipsum proident sunt. Et in duis aute. Commodo ut labore veniam eu occaecat pariatur voluptate adipisicing ex duis.
  </div>
  <div class="second">
    Ea magna ipsum et. Adipisicing laborum consectetur quis velit Lorem dolor eu labore reprehenderit aliquip sit. Et consectetur duis aliqua laborum occaecat pariatur. Laborum velit ut laboris. Veniam ad non incididunt consectetur incididunt sunt nisi do
    elit. Sint qui consectetur magna labore. Do minim duis mollit cupidatat labore consequat excepteur consequat.
  </div>
  <div class="third">
    Cillum sit ea anim sunt qui. Laborum eiusmod velit id fugiat aute elit ut sint irure eiusmod ad ullamco culpa cupidatat. Ullamco fugiat occaecat ex laborum nisi laborum consectetur sint amet nulla in ad. Exercitation elit elit dolor eu ea labore. Deserunt
    nulla magna exercitation laborum nulla sint mollit in culpa laborum. Quis adipisicing pariatur consequat consequat et sunt ipsum labore amet ad esse nulla do.
  </div>

</div>