Flexbox: prevent overflow

Question

I have a div with width: 100% and I want to prevent the child elements to overflow the container.

This is the design:

I want to be able to scroll ONLY the tags (Vietto, Cheryshev, and can be a lot more). Everything else must be always visible on the div.

So, it would be: tag icon, left arrow, tags (ONLY this scrollable), right arrow, buttons.

This is what I'm trying to do: JS Bin but can't get it to work.

.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>

Thanks!