如何创建一个一次只显示一个元素的水平列表？

<div class="container">
  <ul class="list">
    <li>元素1</li>
    <li>元素2</li>
    <li>元素3</li>
    <li>元素4</li>
    <li>元素5</li>
  </ul>
</div>

.container {
  width: 300px; /* 设置容器宽度 */
  overflow-x: scroll; /* 水平滚动 */
}

.list {
  display: flex; /* 使用弹性布局 */
  list-style-type: none; /* 去除列表默认样式 */
  padding: 0;
  margin: 0;
  white-space: nowrap; /* 不换行 */
}

.list li {
  flex: 0 0 100%; /* 每个元素占满容器宽度 */
  max-width: 100%; /* 最大宽度为容器宽度 */
}