添加viewport标签后Bootstrap Flexbox横向滚动元素失效如何解决

问题根因 #

1. 你将滚动容器.scrolling-wrapper同时绑定了Bootstrap的row类，row自带左右负margin，且你给每个卡片外层用了col-2类，col-2默认宽度为视口宽度的1/6，和你硬编码的.card-block固定宽度163px冲突。添加viewport标签后，移动端视口宽度收缩，col-2的计算宽度会小于163px，导致内容溢出逻辑紊乱，滚动功能异常。
2. 你自定义滚动条时将height设为0，会导致滚动条完全不可见，容易误判为滚动失效。

修复方案 #

按照以下步骤修改代码即可恢复正常横向滚动效果：

• 拆分滚动容器与row容器：外层单独用.scrolling-wrapper做滚动容器，内部嵌套row flex-row flex-nowrap结构
• 将每个卡片外层的col-2替换为col-auto，让列宽由内部卡片的固定宽度决定，不会被视口宽度挤压
• 补充滚动条隐藏的兼容代码，适配非webkit内核浏览器

核心修改后的代码示例 #

<!-- 外层滚动容器 -->
<div class="scrolling-wrapper mt-6 pb-6 pt-3">
  <!-- 内部行容器 -->
  <div class="row flex-row flex-nowrap">
    <!-- 每个卡片外层用col-auto -->
    <div class="col-auto">
      <div class="card card-block card-1">
        <img src="http://placehold.it/80x80">
        <span>Om Prakash</span>
        <a href="#">More Info</a>
      </div>
    </div>
    <!-- 剩余所有卡片外层都替换为col-auto即可 -->
  </div>
</div>

/* 补充滚动条兼容代码 */
.scrolling-wrapper{
    overflow-x: auto;
    -ms-overflow-style: none; /* IE和Edge兼容 */
    scrollbar-width: none; /* Firefox兼容 */
}
.scrolling-wrapper::-webkit-scrollbar {
  display: none; /* Chrome/Safari隐藏滚动条 */
}

内容的提问来源于stack exchange，提问作者Forever Edits