Horizontal scroll breaks when using CSS Flexbox

I have a div - scrolling-div that should scroll horizontally when the screen size (width) gets smaller and the content overflows.

Adding this to the div you want to make scrollable usually works :

overflow-y: hidden;
overflow-x: scroll;
white-space: nowrap;
width: 100%;

But the problem is, I have to vertically center the content so I have used Flexbox to do that. But this is causing the scroll to break.

HTML:

<div class="container">
<div class="inner">
  <p>
  Some other content here dsdfdsf dsfdsfsdf dsfdsf
  </p>
  <div class="scrolling-div">
    <div class="bucket">
      <p>
        hello
      </p>
      <p>
        yellow
      </p>
    </div> <!-- Add more buckets -->
  </div>
</div>
</div>

CSS:

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  text-align: center;
}

.scrolling-div {
  width: 100%;
  overflow-y:     hidden;
  overflow-x:     scroll;
  white-space:    nowrap;
  -webkit-overflow-scrolling: touch; 
}

.bucket {
  display: inline-block;
  width: 66px; 
  border: 1px solid;
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
}

I need to horizontally and vertically center .inner to .container but I also need the scrolling-div to scroll. What am I doing wrong?

Here is a fiddle for the code above.