Flexbox：防止溢出

Question

我有一个width: 100%的div，我想阻止子元素溢出容器。

这是设计：

我希望能够滚动仅标签（Vietto，Cheryshev，还可以更多）。其他所有内容必须始终显示在div。

上

所以，它会是：标签图标，左箭头，标签（只有这个可滚动），右箭头，按钮。

这就是我要做的事情：JS Bin但无法让它发挥作用。

.container {
  display: flex;
  align-items: center;
  padding: 0 10px;
  width: 100%;
  background: red;
  height: 50px;
}

.tag-icon-container {
  margin-right: 10px;
  width: 20px;
  max-width: 20px;
}

.tags-container {
  display: flex;
}

.tags {
  display: flex;
  overflow-x: auto;
}

.tag {
  color: white;
  padding: 5px;
  background: blue;
  margin: 0 5px;
}

.buttons {
  display: flex;
  margin-left: 10px;
}

<div class="container">

  <div class="tag-icon-container">
    <span class="tag-icon"></span>
  </div>

  <div class="tags-container">
    <span class="left-arrow">⬅️</span>

    <div class="tags">
      <span class="tag">Tag</span>
      <span class="tag">Tag</span>
      <span class="tag">Tag</span>
      <span class="tag">Tag</span>
      <span class="tag">Tag</span>
      <span class="tag">Tag</span>
      <span class="tag">Tag</span>
      <span class="tag">Tag</span>
      <span class="tag">Tag</span>
      <span class="tag">Tag</span>
      <span class="tag">Tag</span>
      <span class="tag">Tag</span>
      <span class="tag">Tag</span>
      <span class="tag">Tag</span>
      <span class="tag">Tag</span>
      <span class="tag">Tag</span>
      <span class="tag">Tag</span>
      <span class="tag">Tag</span>
      <span class="tag">Tag</span>
      <span class="tag">Tag</span>
    </div>

    <span class="right-arrow">➡️</span>
  </div>

  <div class="buttons">
    <div class="button"></div>
    <div class="button"></div>
    <div class="button"></div>
  </div>

</div>

谢谢！