如何实现横向滚动且隐藏滚动条的div？现有代码未生效

你的代码存在两个核心问题，导致无法实现需求：

• .company 设置了固定宽度800px，比父容器main的500px更宽，会让main出现滚动条，而非.company内部滚动
• 隐藏滚动条的代码用了错误的类名（scrollable-company），且未做跨浏览器兼容

调整后的完整代码如下：

<style>
main{
  width: 500px;
  /* 可选：防止main自身出现滚动条 */
  overflow: hidden;
}
.company{
  width: 100%; /* 改为继承父容器宽度，内容超出时触发内部横向滚动 */
  overflow-x: auto;
  display: flex;
  gap: 12px;
  font-weight: 600;
  font-size: 16px;
  /* 跨浏览器隐藏滚动条 */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
/* Chrome、Safari等WebKit内核浏览器隐藏滚动条 */
.company::-webkit-scrollbar{
  display: none;
}
.btn-company{
  /* 可选：给按钮设置最小宽度，避免内容挤压变形 */
  min-width: 80px;
  padding: 8px 12px;
}
</style>
<main>
<section class="company">
  <button class="btn-company active">All</button>
  <button class="btn-company">Nike</button>
  <button class="btn-company">Adidas</button>
  <button class="btn-company">Asics</button>
  <button class="btn-company">Reebok</button>
  <button class="btn-company">New Balance</button>
  <button class="btn-company">Converse</button>
</section>
</main>

关键调整说明： #

1. 将.company的width:800px改为width:100%，使容器宽度与父容器main一致，内容超出时触发内部横向滚动
2. 补全跨浏览器滚动条隐藏代码：
   • scrollbar-width: none; 适配Firefox
   • -ms-overflow-style: none; 适配Edge
   • .company::-webkit-scrollbar{display: none;} 适配Chrome、Safari等WebKit内核浏览器
3. 可选给按钮添加min-width，避免按钮宽度被内容挤压变形

内容的提问来源于stack exchange，提问作者masoud anaraki