如何让导航栏在下一行滑动？

<div class="navbar-container">
  <ul class="navbar">
    <li><a href="#">导航项1</a></li>
    <li><a href="#">导航项2</a></li>
    <li><a href="#">导航项3</a></li>
    <li><a href="#">导航项4</a></li>
    <li><a href="#">导航项5</a></li>
    <li><a href="#">导航项6</a></li>
    <li><a href="#">导航项7</a></li>
    <li><a href="#">导航项8</a></li>
    <li><a href="#">导航项9</a></li>
    <li><a href="#">导航项10</a></li>
  </ul>
</div>

.navbar-container {
  height: 50px; /* 设置容器高度 */
  overflow: auto; /* 或者使用overflow: scroll; */
}

.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  white-space: nowrap; /* 设置导航栏内容不换行 */
}

.navbar li {
  display: inline-block;
  margin-right: 10px;
}

.navbar li:last-child {
  margin-right: 0;
}