如何用HTML、CSS和JavaScript实现父元素内子元素的两行分页显示效果？

<div class="hidden" id="container">
  <div id="flex-container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
    <div class="item">item7</div>
    <div class="item">item8</div>
    <div class="item">item9</div>
    <div class="item">item10</div>
    <div id="more">更多</div>
  </div>
</div>

#container {
  width: 400px;
  height: 200px;
  border: 1px solid red;
  position: relative;
}

#container.hidden {
  overflow-x: hidden;
  overflow-y: hidden;
}

#container.scroll {
  overflow-x: scroll;
  overflow-y: hidden;
}

#flex-container {
  width: 800px; /* 根据实际内容调整宽度 */
  height: 200px;
  background: pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.item {
  width: 150px;
  text-align: center;
  background: yellow;
  height: 94px;
}

#more {
  display: block;
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 5;
  width: 80px;
  height: 30px;
  background: green;
  border-radius: 5px;
  text-align: center;
  color: white;
  cursor: pointer;
}

document.getElementById("more").onclick = function() {
  this.style.display = "none";
  document.getElementById("container").className = "scroll";
};