Why does position sticky not work without border on the parent container?

Question

Consider the following example:

.container {
  background: lightgray;
  position: relative;
  border: 1px dotted black;
}

button {
  position: sticky;
  top: 0;
}

p {
  margin-bottom: 800px;
}

<div class="container">
  <p></p>
  <p></p>
  <button>Sticky</button>
  <p></p>
  <p></p>
</div>

Position sticky is working as expected - no problem.

Now let's just remove the border from the container:

.container {
  background: lightgray;
  position: relative;
  border: none;
  /* border changed! */
}

button {
  position: sticky;
  top: 0;
}

p {
  margin-bottom: 800px;
}

<div class="container">
  <p></p>
  <p></p>
  <button>Sticky</button>
  <p></p>
  <p></p>
</div>

You can notice that the position sticky is no longer working. Why is that? Does border somehow affects the stacking context or scrollable area or something?

Answer 1

It may Help you :

.container {
border: 0px;
display: inline-block;
width: 100%;
}

Or

    .container {
float: left;
    width: 100%;
    border: 0px;
}