CSS overflow:hidden导致子组件回到可视区域后仍部分不可见

问题分析 #

你的滚动横幅出现子组件截断，核心原因有两个：

• flex容器默认给子元素设置flex-shrink: 1，当总宽度超出容器时会自动压缩子元素
• 滚动容器设置了固定width: 80%，限制了内容的可用宽度，超出部分被容器的overflow: hidden直接隐藏

修复方案 #

1. 调整滚动容器样式 #

修改scroll-text类，取消固定宽度，禁用flex压缩，让容器自适应所有子组件的总宽度：

"scroll-text": {
  flexShrink: 0, /* 禁止flex压缩子元素，保证内容完整展示 */
  width: "fit-content", /* 自适应所有子组件的总宽度 */
  animation: `$marquee ${value}s linear infinite`,
  animationPlayState: "running",
  "&:hover": {
    animationPlayState: "paused",
  },
  "&:focus-within": {
    animationPlayState: "paused",
  },
},

2. 修正动画关键帧 #

移除关键帧里多余的分号，保证动画语法正确（原代码里的分号会导致样式解析异常）：

"@keyframes marquee": {
  "0%": { transform: "translateX(0)" },
  "100%": { transform: "translateX(-100%)" },
}

3. 确认父容器样式 #

保持父容器现有样式即可，overflow: hidden负责隐藏容器外的滚动内容，flex-grow: 1保证容器占满可用宽度：

style={{
  display: "flex",
  flexDirection: "row",
  justifyContent: "flex-start",
  textAlign: "left",
  flexGrow: 1,
  overflow: "hidden",
  height: "100%",
}}

补充说明 #

如果你的子组件是多个独立元素，需要把它们统一包裹在scroll-text容器内，让整个容器作为滚动单元，所有子元素会完整排列后一起滚动，彻底避免截断问题。

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