如何解决带overflow-x:scroll的水平滚动Flexbox悬浮发光截断问题

问题核心：设置了overflow-x:scroll的容器会裁剪子元素的溢出视觉效果（包括box-shadow），导致hover时的发光被容器边界切掉。

方案一：增大滚动容器的内边距 #

给滚动容器增加左右内边距，让发光效果有足够的显示空间，同时微调子项margin避免布局偏移：

修改后的CSS：

.category-wrap {
  /* 增大左右padding，容纳发光的宽度 */
  padding-left: 60px;
  padding-right: 60px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  overflow-x: scroll;
  position: relative;
  width: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* 可选：隐藏滚动条 */
  scrollbar-width: none;
}
.category-wrap::-webkit-scrollbar {
  display: none;
}

.item {
  order: revert;
  animation-fill-mode: backwards;
  transition: all .2s ease-in-out;
  width: 22%;
  min-width: 319px;
  z-index: 1;
  height: 450px;
  /* 减小左右margin，抵消容器padding增大带来的间距变化 */
  margin: 15px 10px;
  background: linear-gradient(to bottom, rgb(53, 53, 53) 53%, rgb(40, 40, 40) 0%);
  border-radius: 2px;
  -moz-border-radius: 4px;
  padding-top: 10px;
}

方案二：嵌套容器分离滚动与溢出显示 #

把滚动功能放到内层容器，外层容器不设置overflow，专门用来容纳子项的发光效果：

修改后的HTML：

<div class="flexbox-container">
  <div class="category-wrap popular scrolling">
    <!-- 新增内层滚动容器 -->
    <div class="scroll-inner">
      <div class="item item-142"></div>
      <div class="item item-141"></div>
      <div class="item item-140"></div>
    </div>
  </div>
</div>

修改后的CSS：

.category-wrap {
  padding-left: 2.4%;
  padding-right: 3.7%;
  position: relative;
  width: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* 内层容器负责滚动功能 */
.scroll-inner {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  overflow-x: scroll;
  /* 给内层加左右padding，避免首尾子项发光被外层容器边缘截断 */
  padding-left: 20px;
  padding-right: 20px;
  scrollbar-width: none;
}
.scroll-inner::-webkit-scrollbar {
  display: none;
}

.item {
  order: revert;
  animation-fill-mode: backwards;
  transition: all .2s ease-in-out;
  width: 22%;
  min-width: 319px;
  z-index: 1;
  height: 450px;
  margin: 15px;
  background: linear-gradient(to bottom, rgb(53, 53, 53) 53%, rgb(40, 40, 40) 0%);
  border-radius: 2px;
  -moz-border-radius: 4px;
  padding-top: 10px;
}

方案二的优势是不需要大幅调整原有布局间距，通过嵌套容器把滚动裁剪和发光显示区域分离，子项发光可以超出内层滚动容器，被外层容器容纳，同时滚动功能正常。

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