CSS overflow-y异常行为：滚动菜单卡片展开信息被隐藏的解决咨询

当你给卡片列表设置overflow-y: auto/scroll时，CSS的默认规则会把overflow-x强制重置为auto——哪怕你显式写了overflow-x: visible也不会生效，这就是左侧展开信息被隐藏的原因。

下面给两个实用的解决办法：

方案一：拆分滚动容器与卡片容器 #

• 给卡片列表外层加一个单独的滚动容器，只让这个容器负责垂直滚动
• 卡片列表本身不设置任何overflow属性，让它的子元素（卡片及展开内容）可以正常超出边界
• 结构示例：

<div class="menu-scroll-wrapper">
  <div class="card-list">
    <!-- 所有卡片元素 -->
  </div>
</div>

对应CSS：

.menu-scroll-wrapper {
  height: 400px; /* 你的菜单固定高度 */
  overflow-y: auto;
}
.card-list {
  /* 无需设置overflow */
}

方案二：用绝对定位脱离滚动上下文 #

• 把卡片内的展开信息设置为绝对定位，同时给卡片本身设置相对定位作为参考
• 这样展开内容会脱离滚动容器的裁剪范围，自然显示在左侧
• CSS示例：

.card {
  position: relative;
}
.card-expand-info {
  position: absolute;
  left: -200px; /* 向左展开的宽度 */
  top: 0;
  z-index: 10; /* 避免被其他卡片遮挡 */
  /* 其他样式如宽度、背景色等 */
}

你可以根据自己的布局结构选择合适的方案，这两种方法都能绕过CSS overflow的强制限制，让展开内容正常显示。

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