为什么溢出隐藏不起作用（使用 3d css 转换）

Question

我正在制作一个可滑动的网格。在外部 div 我包含网格。内部 div 将包含网格项目，作为弹性框。使用鼠标事件，我将更改

offsetX

的值，以便内部 div 由一些 x 值转换，以使所有内容都可滑动。一切正常，但在外部 div 之外的内部 div 的孩子仍然显示，我希望它们被隐藏。我正在使用 tailwind.js 设计所有样式。

<div
  className={cls([
    className,
    "overflow-hidden relative",
    fullWidth ? "w-screen" : "max-w-full",
    paddingY ? `py-${paddingY}` : "py-8",
  ])}
  {...props}
  ref={carouselElementRef}
>
  <div
    className={cls([
      "flex flex-no-wrap overflow-hidden relative min-w-max",
      "touch-pan-y",
      "cursor-grab select-none",
      swiping ? "" : "transition-transform duration-300 ease-out",
    ])}
    onMouseDown={swipe}
    onTouchStart={swipe}
    ref={stageElementRef}
    style={{
      transform: `translate3d(${offsetX}px, 0, 0)`,
    }}
  >
    {children}
  </div>
</div>

这个类似问题的其他答案说让父母/孩子有一个

fixed/relative

位置会解决它，但这没有帮助。将两者都设置为

relative

，并且都设置为

overflow-hidden

并不能解决问题。