Justify center flexbox items without cutting off overflow

Question

I have multiple flexbox containers with child divs aligned within in them.

The containers have varying numbers of child divs. Some have just one child and some have so many children that they overflow the container div, requiring a scroll.

I want the containers with just one or a few child divs to justify content from the center.

However, if there are so many divs that they overflow, I want to make sure the first item(s) does not get cut off.

I have a JSfiddle demonstrating the issue. In the first container, the first few items get cut off, but I want them to start with item one justified left. Is this possible?

.container{
    width: 100%;
    background-color: gray;
    overflow: scroll;
    display: flex;
  gap: 1em;
    justify-content: center;
}

.items{
    width: 100px;
    height: 100px;
    display: inline-block;
  flex-grow: 0;
    flex-shrink: 0;
  background-color: blue;
  color: white;
  text-align: center
}

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). — Paulie_D, Aug 31 '22 at 19:26
Is this a new rule because I've posted jsfiddle links for years. You can't delete jsfiddle. Also my question was closed and the supposed duplicate question linked does not solve mine as shown in this [jsfiddle](https://jsfiddle.net/z05chm9o/1/) — auto, Aug 31 '22 at 19:41

score 2 · Answer 1 · answered Aug 31 '22 at 19:37

Use an outer container and an inner container.
Outer container: has justify-content: center
Inner container: has overflow: auto

.center-container{
    width: 100%;
    background-color: gray;
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

.overflow-container{
    width: fit-content;
    max-width: 100%;
    overflow: auto;
    display: flex;
    gap: 1em;
}

.items{
    width: 100px;
    height: 100px;
    display: inline-block;
    flex-grow: 0;
    flex-shrink: 0;
    background-color: blue;
    color: white;
    text-align: center
}

<div class="center-container">
  <div class="overflow-container">
    <div class="items">Just one item</div>
  </div>
</div>
<div class="center-container">
  <div class="overflow-container">
    <div class="items">Item 1</div>
    <div class="items">Item 2</div>
    <div class="items">Item 3</div>
    <div class="items">Item 4</div>
    <div class="items">Item 5</div>
    <div class="items">Item 6</div>
    <div class="items">Item 7</div>
    <div class="items">Item 8</div>
    <div class="items">Item 9</div>
    <div class="items">Item 10</div>
    <div class="items">Item 11</div>
  </div>
</div>
<div class="center-container">
  <div class="overflow-container">
    <div class="items">Item 1</div>
    <div class="items">Item 2</div>
    <div class="items">Item 3</div>
    <div class="items">Item 4</div>
    <div class="items">Item 5</div>
    <div class="items">Item 6</div>
    <div class="items">Item 7</div>
    <div class="items">Item 8</div>
  </div>
</div>

Thank you! This works. Can you explain why this works but not the other way? — auto, Aug 31 '22 at 20:30
@auto It works because having a single element with `overflow: auto` and `justify-content: center` causes problems, and this solution splits that into two separate elements. — Richard Henage, Aug 31 '22 at 20:56

Justify center flexbox items without cutting off overflow

1 Answers1