Flexbox - 水平滚动溢出问题

Question

尝试创建一个通过flexbox显示元素的水平滚动条。一切正常，除了容器的溢出是不可见的。如何避免此溢出问题并正确显示容器和最后一个元素的间距？

Fiddle with code＆amp;下面的片段。

此图片中显示溢出问题：

但是应该看起来像我使用block / inline-block可以实现的，但不能使用flexbox样式：

＆＃13;

＆＃13;

.wrapper {
  max-width: 375px;
  max-height: 667px;
}
.container {
  display: flex;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #888;
  overflow-x: scroll;
  flex-wrap: nowrap;
}
.container > * {
  display: inline-flex;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
  margin: 0 8px;
}

＆＃13;

<div class="wrapper">
  <div class="container">
    <a href="#"><img src="http://placehold.it/100x100" alt=""></a>
    <a href="#"><img src="http://placehold.it/101x100" alt=""></a>
    <a href="#"><img src="http://placehold.it/102x100" alt=""></a>
    <a href="#"><img src="http://placehold.it/103x100" alt=""></a>
    <a href="#"><img src="http://placehold.it/104x100" alt=""></a>
    <a href="#"><img src="http://placehold.it/105x100" alt=""></a>
    <a href="#"><img src="http://placehold.it/106x100" alt=""></a>
    <span>taco taco</span>
    <img src="http://placehold.it/100x100" alt="">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;