Why is my <Swiper /> width infinite? And why setting overflow-y on the container can solve this problem?

[yodhcn]

The layout is simple: <nav /> on the left, <main /> on the right; a swiper component is placed in the main container, and its width fills the container by default.

[ codesandbox ] https://codesandbox.io/p/devbox/gzlqqh

• Why is the swiper infinitely wide and exceeds the container when no width is set?
  

• Why can setting overflow-y on the container prevent the element width from overflowing the container?