时间戳

首页 > 解决方案 > 为什么使用overflow-x=scroll在我的div上忽略滚动条？

html - 为什么使用overflow-x=scroll在我的div上忽略滚动条？

问题描述

我的 html 上有一个 div，我想应用一个稍后滚动。

这是html

<div class="section-container mt-5 row"  >
     <div class="section" v-for="(item,index) in board.sections" v-bind:key="index">
          <div class="card-title">
               <h5 class="text-center section-header">{{item.name}}</h5>
          </div>
     </div>
</div>

这是我使用的css：

.section-container{
  overflow-x: scroll;
  white-space: nowrap;
}

.section{
  width: 30%;
  margin-left: 2%;
  margin-right: 2%;
}

我在另一篇文章中读到这应该通过横向滚动来解决问题，但它被忽略了，我的 div 只是继续堆叠在同一个 div 上。我用错了吗？它们应该水平对齐并滚动浏览所有这些。

这里的例子

标签： htmlcss

解决方案

我认为您正在使用引导程序。引导类row使元素 aflex-box带有flex-wrap: wrap。这会导致您的元素换行到下一行，而不是流出容器。

在你的 section-container 类中添加一个规则来防止 flex-child 包装。

.section-container {
  overflow-x: scroll;
  flex-wrap: no-wrap;
}

此外，如果您希望孩子具有最小宽度，您可能需要为孩子设置 flex-basis 或 min-width。

我建议你阅读更多关于 flex-box 的内容。这可以帮助您入门。

推荐阅读