Change justify-content value when flex items overflow container

Issue

Look at following fiddle https://jsfiddle.net/27x7rvx6

The CSS (#test is flexbox 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 a one line (nowrap) flexbox with fixed size items. The container has justify-content set to center. Because the items can't shrink and are together wider than the container they start to overflow.

My problem is that the content overflows both to the left and to the right. Is there a way to make the content justified to center but once it starts to overflow make it act like the justify-content property is set to flex-start, resp. make it overflow only to right of the container?

Solution

You can use:

align-items: safe center;
justify-content: safe center;

ps Safari does not support these props

Answered By - Vadim