如何仅隐藏单个div的溢出内容，且隐藏select div的滚动条同时不隐藏右侧全局滚动条？

Got it, let's tackle these two CSS challenges one by one—super common scenarios, so I'll break it down clearly for you:

实现这个很直接，只需要给目标div单独配置overflow: hidden样式即可，完全不会影响页面上其他元素。

具体步骤：

• 给目标div加一个专属类名（比如single-hidden-overflow），避免误影响其他元素
• 在CSS中针对这个类写样式规则

示例代码：

<div class="single-hidden-overflow">
  这里是可能超出容器的内容——比如超长文本、大尺寸图片或者过多的子元素...
</div>

.single-hidden-overflow {
  width: 300px; /* 先给容器设置固定宽高，才会出现内容溢出的情况 */
  height: 200px;
  overflow: hidden; /* 核心属性：超出容器边界的内容直接被裁剪隐藏 */
  border: 1px solid #eee; /* 可选，方便你看清容器范围 */
}

简单说明：overflow: hidden会直接裁剪掉所有超出容器的内容，既不会显示滚动条，也不会让内容"跑"到容器外面。

这个需求需要做跨浏览器兼容，但核心逻辑是只给目标div的滚动条设置隐藏样式，页面全局的滚动条完全不受影响。

先确保目标div本身有滚动需求（内容超出容器，且设置了overflow: auto或overflow: scroll），然后给它加一个类名（比如hide-div-scrollbar），再添加以下兼容代码：

示例代码：

<div class="hide-div-scrollbar">
  这里是超出容器的长内容，会触发滚动，但滚动条会被隐藏...
  <!-- 可以复制大量文本或者添加多个子元素来测试滚动效果 -->
</div>

.hide-div-scrollbar {
  width: 300px;
  height: 200px;
  overflow: auto; /* 允许内容滚动，默认会显示滚动条 */
  border: 1px solid #eee;
}

/* 针对 WebKit 内核浏览器（Chrome、Safari、新版 Edge） */
.hide-div-scrollbar::-webkit-scrollbar {
  display: none; /* 直接隐藏滚动条 */
}

/* 针对 Firefox */
.hide-div-scrollbar {
  scrollbar-width: none; /* 隐藏滚动条 */
}

/* 针对 IE 和旧版 Edge */
.hide-div-scrollbar {
  -ms-overflow-style: none; /* 隐藏滚动条 */
}

关键说明：

• 所有滚动条隐藏规则都只作用于.hide-div-scrollbar类的元素，页面body的全局滚动条完全不受影响
• 虽然滚动条被隐藏了，但容器的滚动功能完全正常——用户可以通过鼠标滚轮、触摸滑动或者键盘方向键来滚动内容
• 上面的代码覆盖了所有主流浏览器，兼容性拉满

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