如何使水平滚动条响应地适合 div 宽度？答案

【问题标题】：How to make an horizontal scrollbar responsively fit to the div width?如何使水平滚动条响应地适合 div 宽度？
【发布时间】：2019-09-04 11:13:32
【问题描述】：

我有一个水平滚动条 class="filter_list" 到一个包装 div class="wrapper"。我希望这个滚动条始终是包装 div 的 100%，并且我希望这个包装 div 具有响应性。

如果我的过滤器列表中只有一个项目，它工作正常，但一旦我放置超过包装器宽度大小，它就不再响应了。

这里有一些图片来说明问题：

反应灵敏且工作正常：

滚动条挡住了不收缩以适应窗口尺寸的包装的宽度（我们可以看到女孩的图片不再是 100% 的正方形大小）：

NOT OK

代码如下：

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper {
  width: 800px;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
}

.magic_wand {
  margin: 15px 0px 20px;
  max-width: 50px;
}

.ico_magic_wand {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.picture_preview {
  width: 100%;
  margin-bottom: 50px;
  height: 100px;
}

.picture_preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.filter_list {
  width: 100%;
  background-color: blueviolet;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 0;
}

.filter:last-child {
  margin-right: 0px;
}

.filter {
  display: inline-block;
  height: 150px;
  width: 150px;
  background-color: blue;
  margin-right: 15px;
}

<body>
  <div class="wrapper">
    <div class="magic_wand">
      <img src="img/ico/magic_wand.png" class="ico_magic_wand">
    </div>
    <div class="picture_preview">
      <img src="https://images.unsplash.com/photo-1527514086375-0a7bae9089be">
    </div>

    <div class="filter_list">
      <div class="filter">

      </div>
      <div class="filter">

      </div>
      <div class="filter">

      </div>
      <div class="filter">

      </div>
    </div>

  </div>
</body>

我想了解为什么div class="filter_list" 的宽度不会随着它的父 div 而缩小，同时减小窗口的宽度以及如何解决这个问题，非常感谢！

【问题讨论】：

你想要根据窗口宽度调整蓝色框吗？总是在 4 列？

标签： html css scroll responsive-design scrollbar

【解决方案1】：

试试这个代码..我无法理解你的问题..这可能是你的期望，否则解释清楚..

css

.filter {
    display: inline-block;
    height: 150px;
    width: 21.3%;
    background-color: blue;
    margin-right: 15px;
}
.filter:nth-child(4n+4) {
  margin-right: 0px;
}

请删除您的 css 代码并添加此代码。我认为 display:flex;是你的代码的问题..

body {
  margin:0px;
}
img {
  max-width: 100%;
  height: auto;
}
.wrapper {
  width: 800px;
  margin: 0 auto;
  text-align: center;
}
.magic_wand {
  margin: 15px auto 20px;
  max-width: 50px;
}
.picture_preview {
  width: 100%;
  margin-bottom: 50px;
  height: 100px;
}
.picture_preview img {
  height: 100%;
}
.filter_list {
  width: auto;
  background-color: blueviolet;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 0;
}
.filter:last-child {
  margin-right: 0px;
}
.filter {
  display: inline-block;
  height: 150px;
  width: 150px;
  background-color: blue;
  margin-right: 15px;
}
@media only screen and (max-width: 1024px) {
  .wrapper {
    width: 100%;
  }
}

【讨论】：

我的意思是它解决了响应问题，但我仍然不明白为什么我的代码不起作用。
而且你的解决方案还有另一个问题：.filter 的平方比在收缩时没有保持
可能你的代码不工作..因为你在px中添加了宽度..所以它很奇怪..最后，你想要与底部滚动相同的宽度和高度吗？这是正确的吗？
是的，就是这样！
我正在寻找有关保留平方比以使用您的解决方案的方法