Why does justify-content: flex-end remove scrollability from a container with overflow-x: auto? [duplicate]

Question

I need to create a horizontally scrolling container class for generic use in a very large application.

I came up with this:

.horizontal-scroller {
  background-color: #ccc;
  display: flex;
  overflow-x: auto;
  width: 100%;
}

button { 
  white-space: nowrap;
}

button::before {
  content: 'A button with a label';
}

<div class="horizontal-scroller">
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
</div>
<p>Scrollable Container</p>

<div class="horizontal-scroller">
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
</div>
<p>Scrollable Container with no overflow</p>

Now for the second case (which has no overflow) I need the container to align the elements to the right, which is why I added

justify-content: flex-end;

.horizontal-scroller {
  background-color: #ccc;
  display: flex;
  justify-content: flex-end;
  overflow-x: auto;
  width: 100%;
}

button { 
  white-space: nowrap;
}

button::before {
  content: 'A button with a label';
}

<div class="horizontal-scroller">
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
</div>
<p>Scrollable Container</p>

<div class="horizontal-scroller">
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
</div>
<p>Scrollable Container with no overflow</p>

Unfortunately this removes the scrollability from the overflowing container.

Question: Why does this happen and how do I solve this with as minimal of a change as possible?

I need to stick to display: flex;.

Answer 1

Adding margin-left: auto on the first child may help. It right-aligns the contents when they're not overflowing without breaking the scrollbar functionality.

.horizontal-scroller {
  background-color: #ccc;
  display: flex;
  overflow-x: auto;
  width: 100%;
}

button { 
  white-space: nowrap;
}

button::before {
  content: 'A button with a label';
}
.horizontal-scroller button:nth-of-type(1) {
  margin-left: auto;
}

<div class="horizontal-scroller">
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
</div>
<p>Scrollable Container</p>

<div class="horizontal-scroller">
  <button type="button"></button>
  <button type="button"></button>
  <button type="button"></button>
</div>
<p>Scrollable Container with no overflow</p>