Flexbox - horizontal scroll overflow issue

Question

Trying to create a horizontal scroller displaying elements via flexbox. Everything works except the container's overflow is not visible. How can I avoid this overflow issue and have correct display of spacing for the container and last element?

Fiddle with code & snippet below.

The overflow issue is displayed in this image:

but should look like the following which I can achieve using block/inline-block, but not with flexbox styling:

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

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

Flexbox - horizontal scroll overflow issue

0 Answers0