Change the value of justify-content when the flex overflow container

Question

Take a look at the following script https://jsfiddle.net/27x7rvx6

CSS ( #test is the #test container, and .items are its children):

 #test { display: flex; flex-flow: row nowrap; justify-content: center; width: 300px; margin-left: 150px; border: 2px solid red; } .item { flex: 0 0 70px; margin-right: 10px; background: blue; height: 70px; border: 2px solid black; } 

There is one row ( nowrap ) of flexbox with fixed-size elements. The justify-content container is set to center . Since the elements cannot shrink and be wider than the container, they begin to overflow.

My problem is that the content overflows both left and right. Is there a way to make the object warranted to center, but as soon as it starts to overflow, it acts as if the justify-content property is set to flex-start , respectively. do overflow just to the right of the container?

Answer 1

justify-content is the wrong approach to the center due to the problem you are describing.

Instead, I recommend auto fields . You can use them in the center:

Prior to alignment through justify-content and align-self , any positive free space extends to automatic fields in this dimension.

And they behave the way you want, with overflow:

Overflow fields ignore their automatic fields and overflow in the end direction.

For example, you can set margin-left: auto to the first flexibility element and margin-right: auto to the last, or insert the aliases ::before and ::after .

 .test { display: flex; flex-flow: row nowrap; width: 200px; border: 2px solid red; margin: 10px; } .wide.test { width: 500px; } .test::before, .test::after { content: ''; /* Insert pseudo-element */ margin: auto; /* Make it push flex items to the center */ } .item { flex: 0 0 50px; margin-right: 10px; background: blue; height: 50px; border: 2px solid black; } 

 <div class="test"> <div class="item"></div><div class="item"></div><div class="item"></div> <div class="item"></div><div class="item"></div><div class="item"></div> </div> <div class="wide test"> <div class="item"></div><div class="item"></div><div class="item"></div> <div class="item"></div><div class="item"></div><div class="item"></div> </div>