使用flex-basis水平滚动不起作用

Question

我正在使用33％的flex-basis设置容器的宽度，该容器的内容将超过其33％的宽度。我希望内容在容器内水平滚动，但是容器会忽略flex-basis并增长到内容的宽度。

如何使容器保持33％的宽度？

请参见下面的代码。

Fiddle

  <div style="flex-basis: 33.33333%; background-color: red; height: 25px;">
    <div style="overflow-x: auto; white-space: nowrap;">
      <span style="background-color: yellow; margin: 2px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span style="background-color: yellow; margin: 2px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span style="background-color: yellow; margin: 2px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span style="background-color: yellow; margin: 2px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span style="background-color: yellow; margin: 2px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span style="background-color: yellow; margin: 2px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span style="background-color: yellow; margin: 2px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span style="background-color: yellow; margin: 2px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span style="background-color: yellow; margin: 2px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span style="background-color: yellow; margin: 2px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    </div>
  </div>
```</div>