将容器的最后一个元素居中放置在容器中间

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/