为何Flex项目溢出Flex容器并被页面裁切？

我想要创建一个宽度适配页面的flexbox，让所有flex项横向排列，溢出部分可通过滚动查看。目前功能基本实现，但flex容器起始端的flex项被页面裁切。我尝试过移除图片内边距改用gap、修改flex方向为纵向并启用换行、移除align-self属性，还调整过图片尺寸，但均未解决问题。最终移除justify-content: center;后问题得以解决。

示例代码 #

CSS代码 #

html,
body {
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  align-items: center;
}

.image_container {
  display: flex;
  flex-wrap: nowrap;
  height: 80%;
  min-width: 100%;
  align-items: flex-start;
  justify-content: center;
  overflow-x: scroll;
  box-sizing: border-box;
  padding: 0;
  gap: 3%;
  /* margin: 10%; */
}

.image_container>.funky_image {
  align-self: flex-start;
  height: 80vh;
  aspect-ratio: 5 / 6;
  /* padding: 2%; */
  filter: drop-shadow(0 0 3px #000);
  box-sizing: border-box;
  overflow: hidden;
  --position: 50%;
  object-position: var(--position) 50%;
  object-fit: cover;
  flex-shrink: 0;
}

HTML代码 #

<div class="container">
  <div class="image_container">
    <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="通用美观图片" draggable="false">
    <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="通用美观图片" draggable="false">
    <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="通用美观图片" draggable="false">
    <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="通用美观图片" draggable="false">
    <img class="funky_image" src="https://picsum.photos/id/235/274/183" alt="通用美观图片" draggable="false">
    <img class="funky_image" src="https://picsum.photos/id/235/274/183" alt="通用美观图片" draggable="false">
    <img class="funky_image" src="https://picsum.photos/id/235/274/183" alt="通用美观图片" draggable="false">
    <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="通用美观图片" draggable="false">
    <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="通用美观图片" draggable="false">
  </div>
</div>

内容的提问来源于stack exchange，提问作者Slinkyartist