如何为flex box容器添加水平滚动？

<div class="scroll-container">
  <div class="flex-container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
  </div>
</div>

.scroll-container {
  overflow-x: auto;
}

.flex-container {
  display: flex;
}

.item {
  width: 200px;
  margin-right: 10px;
}