使用 flexbox 的水平滚动问题 div

Question

我正在使用 flexbox css 制作一个包含多个 div 的容器以水平滚动，但问题是当我尝试向容器添加更多 div 时，它移动到左侧，显示左侧的 div 被隐藏。

我不明白发生了什么这是代码片段 codepen

.scroll{
  display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: space-evenly;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.item{
  flex: 0 0 auto;
  background: #e4e4e4;
  width: 150px;
  height: 150px;
  margin: 10px;
}

<div class="scroll">
  <div class="item">
  </div>
   <div class="item">
  </div> <div class="item">
  </div> <div class="item">
  </div> <div class="item">
  </div> <div class="item">
  </div>
   <div class="item">
  </div> <div class="item">
  </div>
   <div class="item">
  </div> <div class="item">
  </div>
</div>

谢谢

Answer 1

从 .scroll 中删除 justify-content: space-evenly;。

演示：

.scroll{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.item{
    flex:  0 0 auto;
    background: #e4e4e4;
    width: 150px;
    height: 150px;
    margin: 10px;
}

<div class="scroll">
  <div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div>
</div>

这将阻止元素在两侧越界。
所有 div 都以这种方式显示在一行中。

Answer 2

这里的主要问题是，对于某些 justify-content 值，溢出分布会在其左右边缘溢出 flex 父级。

https://www.w3.org/TR/css-align-3/#distribution-values

因此引入了一个新关键字，safe，可以控制溢出的行为方式。

https://www.w3.org/TR/css-align-3/#overflow-values

由于这是对 Flexbox 模型的全新补充，它还不能跨浏览器工作，space-evenly。

当它出现时（以及支持它的浏览器），此 CSS 行将解决问题

justify-content: space-evenly safe;

一个可能的解决方法是使用自动边距，当它们不会填满它们的父级时实现均匀间隔的项目，并且当太多时只在右边缘溢出，可能是使用自动边距。

堆栈片段

.scroll{
  display: flex;
  /*flex-wrap: nowrap;                   this is the default, can be removed  */ 
   overflow-x: auto;
  /*justify-content: space-evenly;       removed  */
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.item{
  flex: 0 0 auto;
  background: #e4e4e4;
  width: 150px;
  height: 75px;
  margin: 10px;
}

.item{
  margin-left: auto;                  /* added  */
}
.item:last-child{
  margin-right: auto;                 /* added  */
}

Too many
<div class="scroll">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<br>Too few
<div class="scroll">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 3

.Wrapper {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  max-width: 100%; //this will solve issue
}

.TagWrapper:{
  display: flex;
  flex-shrink: 0;
}

Answer 4

您可以将 Parent 或 Container 的位置设置为 Relative 并将其中的子项设置为 absolute.

.Parent{
display: flex;
// and use any flexbox property
width: 100%;
height: 100%


position: relative; // important point
overflow: auto;
}

.Child{
position: absolute; // important point
}

使用 flexbox 的水平滚动问题 div

issue with horizontal scrolling div using flexbox

html

css

horizontal-scrolling

flexbox