Horizontal scroll breaks when using CSS Flexbox

Question

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.

An initial setting on flex items is `min-width: auto`. This means that an item cannot be smaller than the size of its content. To override this default use `min-width: 0` or `overflow` with any value except `visible`. https://jsfiddle.net/9n7430t6/1/ — Michael Benjamin, Jul 24 '17 at 16:52

score 2 · Accepted Answer · answered Jul 24 '17 at 13:03

Working Example (i have just added overflow:hidden to .inner):

* {
  box-sizing: border-box;
}

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

.inner {
  background-color: yellow;
  overflow:hidden;
}

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

<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>
    
    <div class="bucket">
      <p>
        hello
      </p>
      <p>
        yellow
      </p>
    </div>
    
    <div class="bucket">
      <p>
        hello
      </p>
      <p>
        yellow
      </p>
    </div>
    
    <div class="bucket">
      <p>
        hello
      </p>
      <p>
        yellow
      </p>
    </div>
    
    <div class="bucket">
      <p>
        hello
      </p>
      <p>
        yellow
      </p>
    </div>
    
    <div class="bucket">
      <p>
        hello
      </p>
      <p>
        yellow
      </p>
    </div>
    
    <div class="bucket">
      <p>
        hello
      </p>
      <p>
        yellow
      </p>
    </div>
    
    <div class="bucket">
      <p>
        hello
      </p>
      <p>
        yellow
      </p>
    </div>
    
    <div class="bucket">
      <p>
        hello
      </p>
      <p>
        yellow
      </p>
    </div>
    
    <div class="bucket">
      <p>
        hello
      </p>
      <p>
        last yellow
      </p>
    </div>
    
    </div>
    
  </div>
  
  </div>

Oh shoot. This works. Thank you! If you don't mind, can you explain why the scrollbar broke without an overflow:hidden on the parent? — user3607282, Jul 24 '17 at 13:18
@user3607282 flex items don't shrink less to their content.So we need to use overflow on them. — the_mishra, Jul 25 '17 at 06:40

Horizontal scroll breaks when using CSS Flexbox

1 Answers1