覆盖式滚动栏遮挡右侧操作箭头，寻求原生CSS解决方案

方案一：将箭头移出滚动容器（推荐） #

最直接的解决方式是把展开箭头放在滚动容器的外部，避免和滚动区域重叠。通过flex布局就能轻松实现：

/* 外层容器，包含滚动区域和箭头 */
.options-wrapper {
  display: flex;
  align-items: center;
  gap: 8px; /* 滚动区域和箭头之间的间距 */
}

/* 滚动选项的容器 */
.scrollable-options {
  flex: 1;
  overflow-y: auto;
  max-height: 200px; /* 根据需求设置最大高度 */
  /* 其他基础样式 */
}

/* 展开箭头样式 */
.expand-arrow {
  cursor: pointer;
  /* 箭头的视觉样式，比如用icon或者border模拟 */
}

这种方式完全避开了滚动栏类型的差异，不管是Firefox的覆盖式滚动栏还是Edge的占用空间式滚动栏，箭头都不会被遮挡，同时无滚动栏时也不会出现多余空白。

方案二：针对覆盖式滚动栏的CSS适配（仅针对支持scrollbar-width的浏览器） #

如果必须把箭头放在滚动容器内部，可以利用CSS的@supports规则锁定使用覆盖式滚动栏的浏览器（如Firefox），再结合滚动容器的溢出状态调整内边距。不过需要注意，CSS目前无法直接判断容器是否出现滚动条，只能基于滚动容器的overflow属性做近似处理：

.scrollable-options {
  overflow-y: auto;
  max-height: 200px;
  /* 默认无额外内边距 */
  padding-right: 0;
}

/* 针对支持scrollbar-width的浏览器（覆盖式滚动栏），当容器可滚动时添加内边距 */
@supports (scrollbar-width: auto) {
  .scrollable-options {
    /* 假设滚动栏宽度为16px，可根据实际调整 */
    padding-right: 16px;
  }
  
  /* 如果容器内容未溢出（无滚动条），移除内边距 */
  /* 注：此部分仅在浏览器支持`:has()`伪类时生效，目前Chrome、Edge已支持，Firefox需开启布局.css.has-selector.enabled */
  .scrollable-options:has(> *:not(:last-child)) {
    /* 这里的判断逻辑需要根据实际内容结构调整，仅作示例 */
    padding-right: 0;
  }
}

这个方案的局限性在于，:has()伪类的支持还不全面，且判断内容是否溢出的逻辑需要结合实际DOM结构调整，无法做到完全通用。

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