html - 使用 CSS Flexbox 时水平滚动中断

<分区>

我有一个 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对于上面的代码。

最佳答案

工作示例(我刚刚将 overflow:hidden 添加到 .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>

关于html - 使用 CSS Flexbox 时水平滚动中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45280943/

上一篇：jquery删除一个元素，如果它后面没有文本

下一篇：javascript - Webgl 没有渲染我的圈子

相关文章：

html - 正则表达式禁止 HTML 标签？

twitter-bootstrap - 投影效果不显示 [CSS3, Twitter Bootstrap 3]

html - Css flex box 使第二个元素居中

css - 水平文本旁边的垂直文本 react 原生？

html - 什么限制了元素的宽度？

html - CSS 对齐以右对齐表格中的列表

javascript - ng-repeat 中的折叠更改图标

html - Flexbox 不会展开

javascript - 如何使用带有 angularjs 的单选按钮启用禁用选择下拉列表？

javascript - 如何正确链接调用 $.show() 和 $.toggleClass() 来触发 CSS3 动画