滚动元素子元素隐藏区域CSS属性不生效问题求助

问题现象 #

为小屏幕设置了overflow-x: scroll的横向滚动容器，其子元素（订单行）的背景色、hover交互仅在初始可见区域生效，滚动后露出的部分没有样式且无法触发点击/hover效果。

问题根源 #

滚动容器内的表头和订单行元素未设置足够的宽度，仅默认占容器初始可视区域宽度，导致滚动后超出部分没有被元素覆盖，样式和交互自然无法生效。

修复步骤 #

给滚动容器内的表头和每一行订单添加width: fit-content，让元素宽度自适应内部所有列的总宽度，确保完全覆盖整个可滚动区域。

修改后的关键CSS代码 #

&__content {
  margin-top: 25px;
  width: 100%;
  background-color: white;
  border-radius: 5px;
  box-shadow: 4px 4px 5px rgb(214, 214, 214);
  overflow-x: scroll;
  
  &__header {
    @include flex(1, 0);
    justify-content: start;
    width: fit-content; /* 让表头宽度适配所有列总宽度 */
    p {
      @include flex(0, 0);
      width: 100%;
      text-align: center;
      height: 50px;
      padding-right: 10px;
      border-bottom: 1px solid rgb(202, 202, 202);
      &:nth-child(1) {
        width: 60px;
        min-width: 60px
      }
      &:nth-child(2) {
        width: 100%;
        min-width: 200px
      }
      &:nth-child(3) {
        width: 100%;
        min-width: 350px;
      }
      &:nth-child(4) {
        width: 100%;
        min-width: 200px
      }
      &:nth-child(5) {
        width: 100%;
        min-width: 150px
      }
      &:nth-child(6) {
        width: 60px;
        min-width: 60px
      }
      &:nth-child(7) {
        width: 100%;
        min-width: 200px;
      }
      &:nth-child(8) {
        width: 200px;
        min-width: 200px;
      }
    }
  }
  
  &__pedido,
  &__pedido-finalizado {
    @include flex(0, 0);
    justify-content: start;
    padding: 10px 0;
    transition: all ease-in-out 125ms;
    width: fit-content; /* 让每一行订单宽度适配所有列总宽度 */
    
    &:hover {
      cursor: pointer;
      background-color: rgb(247, 247, 247)
    }
    
    p {
      @include flex(0, 0);
      text-wrap: nowrap;
      overflow-x: hidden;
      padding-right: 10px;
      pointer-events: none;
      user-select: none;
      &:nth-child(1) {
        width: 60px;
        min-width: 60px
      }
      &:nth-child(2) {
        width: 100%;
        min-width: 200px
      }
      &:nth-child(3) {
        width: 100%;
        min-width: 350px;
      }
      &:nth-child(4) {
        width: 100%;
        min-width: 200px
      }
      &:nth-child(5) {
        width: 100%;
        min-width: 150px
      }
      &:nth-child(6) {
        width: 60px;
        min-width: 60px
      }
      &:nth-child(7) {
        width: 100%;
        min-width: 200px;
      }
      &:nth-child(8) {
        width: 200px;
        min-width: 200px;
      }
    }
  }
  
  &__pedido-finalizado {
    filter: opacity(25%);
    &:hover {
      background-color: rgb(221, 221, 221)
    }
  }
}

效果说明 #

添加width: fit-content后，表头和订单行的宽度会根据内部所有列的min-width总和自动计算，完全覆盖滚动容器的整个可滚动区域，背景色、hover交互等样式就能作用到全部内容，滚动后露出的部分也能正常响应交互。

内容的提问来源于stack exchange，提问作者Gabriel F.