div设置overflow-y可滚动时保持overflow-x可见的React卡片悬浮展开问题

问题根源 #

给元素设置overflow-y: auto时，浏览器会自动将同元素的overflow-x隐式设为auto而非默认的visible，所以水平方向超出容器的卡片内容会被强制裁剪，这是CSS规范的既定行为，不是代码逻辑问题。

可选实现方案 #

方案1：纯CSS兼容方案（无JS改动，适合简单侧边栏场景）

不需要修改TS逻辑，仅调整CSS即可，利用padding-right预留展开空间、负margin抵消布局占位：

.container-light {
  background-color: #eaeaea;
  width: 100px;
  overflow-y: auto;
  height: 300px;
  /* 预留卡片展开的横向空间，值为展开宽度减去原容器宽度 */
  padding-right: 220px;
  /* 用负margin抵消padding的布局占位，不影响其他相邻元素的排版 */
  margin-right: -220px;
}
.card {
  height: 60px;
  width: 80px; /* 算上左右10px margin总宽度刚好100px，适配原容器宽度 */
  border-radius: 4px;
  flex-shrink: 0;
  z-index: 2;
  border: 1px solid #5a5a5a;
  margin: 0 10px 5px;
  background-color: #eaeaea;
}
.card:hover {
  width: 300px; /* 算上左右margin总宽度320px，和需求的展开宽度一致 */
  border: 1px solid #1473e6;
}

优势是零逻辑改动，缺点是仅适合侧边栏类场景，如果容器右侧有交互元素，展开的卡片会覆盖在上方。

方案2：React动态浮层方案（最稳定，无布局冲突）

通过状态管理当前悬浮的卡片，在最外层容器单独渲染展开浮层，完全不受滚动容器的裁剪限制，不需要复杂的定位计算：

1. 新增state存储悬浮卡片信息

interface AppState {
  payload: Array<{ text: string; heading: string; intitials: string }>;
  hoveredCard: { index: number; top: number } | null;
}
// constructor初始化
this.state = {
  payload: [/* 原有数据 */],
  hoveredCard: null
};

2. 绑定卡片悬浮事件，计算相对偏移

// 类组件用createRef存储卡片引用数组
private cardRefs: (HTMLDivElement | null)[] = [];

render() {
  return (
    <div className="container">
      <div className="container-light">
        {this.state.payload.map((item, index) => (
          <div 
            ref={el => this.cardRefs[index] = el}
            className="card"
            onMouseEnter={() => {
              const scrollEl = document.querySelector('.container-light') as HTMLDivElement;
              const cardEl = this.cardRefs[index];
              if (cardEl && scrollEl) {
                // 计算卡片相对于滚动容器的顶部偏移，减去滚动距离实现滚动时对齐
                const top = cardEl.offsetTop - scrollEl.scrollTop;
                this.setState({ hoveredCard: { index, top } });
              }
            }}
            onMouseLeave={() => this.setState({ hoveredCard: null })}
          >
            {/* 原有卡片内容 */}
          </div>
        ))}
      </div>
      {/* 悬浮展开浮层，渲染在最外层不受滚动容器裁剪 */}
      {this.state.hoveredCard && (
        <div 
          className="card"
          style={{
            position: 'absolute',
            top: this.state.hoveredCard.top,
            left: 0,
            width: 320px,
            border: '1px solid #1473e6',
            zIndex: 99
          }}
        >
          {/* 浮层内容取对应index的payload数据即可 */}
          {this.state.payload[this.state.hoveredCard.index].heading}
        </div>
      )}
    </div>
  );
}

优势是完全无裁剪问题，兼容所有浏览器，不需要调整兄弟元素的布局，适合复杂页面场景。

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