屏幕内容滑入/滑出时的嵌套CSS过渡问题

看起来你已经把核心交互效果做出来了，剩下两个小问题咱们逐个拆解解决：

1. 过渡延迟影响子元素的问题 #

你提到给窄栏加transition-delay后干扰了子元素，这是因为CSS过渡属性会默认继承。如果直接给父容器（窄栏）加全局延迟，它的所有子元素的过渡动画都会带上这个延迟，显然不符合预期。

解决思路是把延迟精准绑定到窄栏需要过渡的单个属性上，让子元素的过渡独立设置：

/* 窄栏仅针对宽度变化添加延迟 */
.narrow-column {
  transition: width 0.3s ease 0.2s; /* 宽度收缩/展开延迟0.2s触发 */
}

/* 内部.filters的过渡无延迟，独立执行位移动画 */
.narrow-column .filters {
  transition: transform 0.3s ease; /* 点击后立刻响应滑出/滑入 */
}

这样窄栏的宽度变化会延后触发，而子元素的位移动画会即时响应，两者互不干扰。如果想要更流畅的视觉顺序，甚至可以反过来：先让子元素滑出，延迟后再收缩窄栏宽度，体验会更自然。

2. 无端出现滚动条的问题 #

你推测是窄栏内容被挤压后高度异常，这个方向完全正确。滚动条出现通常是因为元素总高度超出了视口或父容器范围，可以从这几个方向调整：

方法一：给布局容器添加溢出隐藏 #

给包裹两栏的父容器设置：

.layout-container {
  min-height: 100vh;
  overflow: hidden; /* 截断超出容器的内容，避免触发滚动条 */
}

方法二：确保窄栏高度不会溢出 #

给窄栏设置100%高度，并配合box-sizing: border-box，避免内边距或边框额外增加元素总高度：

.narrow-column {
  height: 100%;
  box-sizing: border-box;
}

方法三：修正.grid__item的内边距影响 #

你用wrapper div解决了内边距的过渡问题，不妨给.grid__item也加上box-sizing: border-box，彻底避免内边距导致的高度溢出：

.grid__item {
  box-sizing: border-box;
}

另外可以排查下：窄栏收缩时是否有元素因为宽度不足换行，进而拉高了整体高度？如果是这种情况，给窄栏内的元素加white-space: nowrap或者调整内部布局，就能避免换行导致的高度异常。

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