Scroll-x溢出不起作用 - 显示y的滚动条

Question

我试图理解为什么我不能水平滚动以查看其他粉红色的拇指。我添加了一个scroll-x溢出到拇指容器，并认为它可以让我水平滚动看到其他拇指;相反，它只是垂直滚动。

有人可以解释为什么它不会水平滚动吗？万分感谢

#content-wrap {
  background: lightgreen;
  width: 300px;
  height: 300px;
}
#main-image {
  background: cyan;
  width: 300px;
  height: 250px;
  float: left;
}
#thumbs-wrap {
  background: orange;
  width: 300px;
  height: 50px;
  float: left;
  overflow-x: scroll;
}
.thumb {
  background: pink;
  box-sizing: border-box;
  width: 75px;
  height: 50px;
  border: 2px solid grey;
  float: left;
}

<div id="content-wrap">
  <div id="main-image"></div>
  <div id="thumbs-wrap">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
  </div>
</div>

Answer 1

这是因为您的#thumbs-wrap具有固定的宽度，并且不足以将所有子元素保留在一行中或添加水平滚动条。作为一个简单的解决方案，您可以将所有子元素包装在另一个子元素div中，并为其提供额外宽度。这是一个例子：

#content-wrap {
  background: lightgreen;
  width: 300px;
  height: 300px;
}
#main-image {
  background: cyan;
  width: 300px;
  height: 250px;
  float: left;
}
#thumbs-wrap {
  background: orange;
  width: 300px;
  height: 50px;
  float: left;
  overflow-x: scroll;
}
#thumbs-inner-wrap {
  width: 1000px;
}
.thumb {
  background: pink;
  box-sizing: border-box;
  width: 75px;
  height: 50px;
  border: 2px solid grey;
  float: left;
}

<div id="content-wrap">
  <div id="main-image"></div>
  <div id="thumbs-wrap">
    <div id="thumbs-inner-wrap">
      <div class="thumb"></div>
      <div class="thumb"></div>
      <div class="thumb"></div>
      <div class="thumb"></div>
      <div class="thumb"></div>
      <div class="thumb"></div>
    </div>
  </div>
</div>

Answer 2

当没有更多水平空间时，HTML元素通常会换行到新行。这就是为什么即使设置overflow-x: auto也会获得垂直滚动条的原因。您可以使用CSS flexbox覆盖此行为，而无需添加任何其他元素。将以下内容添加到CSS中：

#thumbs-wrap {
    display: flex;
    flex-wrap: nowrap;
}
.thumb {
    flex: 0 0 auto;
}

这是如何运作的？

flex-wrap:nowrap确保我们强制子元素保持在一行，而不是换行到新行。

现在通常这可能会使flex项缩小或增长以适合其父元素的水平空间。我们可以通过控制它们的大小来控制它。

包含三个值的flex属性是flex: flex-grow flex-shrink flex-basis的缩写。

将flex-grow和flex-shrink设置为0时，不允许弹性项目增大/缩小或缩小以适合容器的空间。

flex-basis:auto确保flex项的大小与我们在CSS中已经调整大小的方式完全相同。

这些规则集一起强制flex项（.thumb）水平对齐，而不是换行到第二行并保持其原始大小。这将强制水平滚动条显示在#thumbs-wrap元素上。

您可以看到它与您的代码一起如何运作：

＆＃13;

＆＃13;

#content-wrap {
  background: lightgreen;
  width: 300px;
  height: 300px;
}
#main-image {
  background: cyan;
  width: 300px;
  height: 250px;
  float: left;
}
#thumbs-wrap {
  background: orange;
  width: 300px;
  height: 50px;
  float: left;
  overflow-x: scroll;
  display: flex;
  flex-wrap: nowrap;
}
.thumb {
  flex: 0 0 auto;
  background: pink;
  box-sizing: border-box;
  width: 75px;
  height: 50px;
  border: 2px solid grey;
  float: left;
}

＆＃13;

<div id="content-wrap">
  <div id="main-image"></div>
  <div id="thumbs-wrap">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;