使用CSS Flexbox时，水平滚动会中断

Question

我有一个div - scrolling-div，当屏幕尺寸（宽度）变小并且内容溢出时，它应该水平滚动 。

将此添加到您想要滚动的div通常有效：

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

但问题是，我必须垂直居中内容，所以我使用Flexbox来做到这一点。但这导致滚动中断。

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

我需要将 .inner 水平和垂直居中到 .container ，但我还需要 scrolling-div 才能滚动。我做错了什么？

以上是代码的fiddle。

Answer 1

工作示例（我刚刚将overflow:hidden添加到.inner）：

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;