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

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;.

hey @connexo as this question has crossed my mind several times. The reason for this maybe is that we want to align the items to the flex-end that means the end of the main-axis (in your case row) and in your case the elements are overflowing the div's length because of which i think the scroll doesn't appear. Now can you explain a bit more about how you want the UI to be that would help. — AKASH PANDEY, Jul 22 '19 at 09:36
@connexo This is your answer: https://stackoverflow.com/questions/47372148/overflow-auto-not-working-with-justify-content-flex-end — Jabberwocky, Jul 22 '19 at 09:56

score 2 · Accepted Answer · answered Jul 22 '19 at 09:59

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>

This seems to do exactly what I need (tested in IE11, FF, Chrome on Windows 10) while also being the least invasive solution offered. Thanks alot! — connexo, Jul 22 '19 at 11:31

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

1 Answers1