为什么当容器具有全宽时滚动隐藏一些元素？

Question

我有一个宽度为 100vw 的 div，可以使用动态元素滚动。但是，一旦您添加更多项目，第一个项目会突然消失一次，即使您尝试滚动也看不到。

这在手机上更可测试，一旦视图宽度更小。

我的问题是：如何实现自然滚动，所有项目都可见，视图宽度为 100vw？

html, body {
  height: 100vh;
  width: 100vw;
}

#images {
  overflow-x: scroll;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35vh;
  width: 100vw;

  img {
    height: 20vh;
    width: 20vh;
    margin-right: 1.5rem;
    cursor: pointer;
  }
}

const App: React.FC = () => {
  const [photos, setPhotos] = React.useState<string[]>([])
  
  React.useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/photos')
      .then(res => res.json())
      .then(data => data && setPhotos(data.filter(p => p.id < 11).map(p => p.url)))
  }, [])
  
  return (
    <div id='images'>
      {photos.length && photos.map((p, i) => (
        <img key={`${i}${p}`} src={p} alt='mock'/>
      ))}
    </div>
  )
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.querySelector('#root')
);

密码笔：https://codepen.io/mdsp9070/full/bGeGXyg

Answer 1

这是什么意思？ Flex wrap 或 grid 会给你这个效果。

  html, body {
  height: 100vh;
  width: 100vw;
}

#images {
  overflow-x: scroll;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100vw;

  img {
    height: 20vh;
    width: 20vh;
    margin-right: 1.5rem;
    cursor: pointer;
    margin-bottom: 12px;
  }
}

编辑*

html, body {
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
}

#images {
  margin: 0 auto;
  padding: 0 5px;
  box-sizing: border-box;
  overflow-x: scroll;
  display: flex;
  align-items: center;
  height: 35vh;
  width: 100%;

  img {
    box-sizing: border-box;
    height: 20vh;
    width: 20vh;
    margin-right: 1.5rem;
    cursor: pointer;
  }
}