Отцентрировать последний элемент контейнера в середине контейнера

Question

Я пытаюсь создать своего рода «слайд-меню», в котором отображаются все элементы, а текущий элемент выделяется.

У меня сейчас проблема в том, что когда выбран элемент , он не прокручивается до центра контейнера.

Чтобы решить эту проблему, я добавил элемент-обертку между элементами и контейнером и устанавливает ширину очень большой, затем с помощью JavaScript прокрутите до текущего элемента.

Есть ли способ достичь того же результата без выполнения этого обходного пути?

CSS:

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 60px;
  background-color: darkcyan;
  padding: 10px;
  margin-bottom: 10px;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; 
}

.wrapper.hard {
  width: 10000000px;
}

.item_wrapper {
  flex-shrink: 0;
  height: 100%;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box, .box2 {
  height: 80%;
  width: 70px;
  background-color: cyan;
  transition: all 0.2s;
}

.box.current, .box2.current {
  height: 100%;
  width: 80px;
  transition: all 0.2s;
}

https://jsfiddle.net/Dynacord/sz3daL46/