如何保留list滚动的同时避免gallery的box-shadow被父元素截断？

我来帮你搞定这两个问题：

问题1：同时实现list可滚动且gallery的box-shadow不被截断 #

问题根源 #

你当前给.main设置了overflow: hidden，这会把所有超出它边界的内容（包括.gallery的阴影）都裁剪掉。如果改成overflow: visible，.main的高度会被内部内容撑开，导致.list的1fr网格行高跟着内容无限延伸，自然就失去了滚动效果。

可行方案 #

我们可以把.gallery从.main的网格布局里抽出来，用绝对定位让它保持原本的视觉位置，同时脱离.main的overflow约束。这样既保留.main的overflow: hidden来确保.list的滚动功能，又能让.gallery的阴影完整显示出来。

修改后的代码如下：

CSS 调整

body { margin: 0; }
.root { 
  display: flex; 
  flex-direction: column; 
  width: 100%; 
  height: 100vh; 
  background-color: red;
  position: relative; /* 为绝对定位的gallery提供定位参考 */
}
.strip { 
  height: 120px; 
  background-color: rgb(111, 0, 255);
  flex-shrink: 0; /* 顺带解决strip的渲染问题 */
}
.main { 
  flex: 1; 
  overflow: hidden; 
  margin: 48px; 
  background-color: rgb(0, 255, 179); 
  display: grid; 
  grid-template-rows: min-content 1fr; /* 移除gallery对应的网格行 */
}
.header { height: 100px; background-color: rgb(0, 217, 255); }
.gallery { 
  height: 200px; 
  background-color: rgb(166, 255, 0); 
  box-shadow: 0px 0px 15px 15px rgba(0, 0, 0, 0.75); 
  z-index: 100;
  position: absolute;
  left: 48px;
  right: 48px;
  top: calc(120px + 48px + 100px); /* 精准计算位置：strip高度 + main的top margin + header高度 */
}
.list { background-color: rgb(214, 58, 131); overflow: auto; }

HTML 调整

把.gallery从.main中移到.root下：

<div class="root">
  <div class="strip">strip</div>
  <div class="gallery">gallery</div> <!-- 调整到这个位置 -->
  <div class="main">
    <div class="header">header</div>
    <div class="list">
      <div class="list-item"><h1>Item</h1></div>
      <div class="list-item"><h1>Item</h1></div>
      <div class="list-item"><h1>Item</h1></div>
      <div class="list-item"><h1>Item</h1></div>
      <div class="list-item"><h1>Item</h1></div>
      <div class="list-item"><h1>Item</h1></div>
      <div class="list-item"><h1>Item</h1></div>
      <div class="list-item"><h1>Item</h1></div>
      <div class="list-item"><h1>Item</h1></div>
      <div class="list-item"><h1>Item</h1></div>
      <div class="list-item"><h1>Item</h1></div>
      <div class="list-item"><h1>Item</h1></div>
      <div class="list-item"><h1>Item</h1></div>
      <div class="list-item"><h1>Item</h1></div>
      <div class="list-item"><h1>Item</h1></div>
      <div class="list-item"><h1>Item</h1></div>
      <div class="list-item"><h1>Item</h1></div>
      <div class="list-item"><h1>Item</h1></div>
      <div class="list-item"><h1>Item</h1></div>
      <div class="list-item"><h1>Item</h1></div>
      <div class="list-item"><h1>Item</h1></div>
    </div>
  </div>
</div>

调整后效果：

• .main的overflow: hidden依然生效，.list的滚动功能完全正常
• .gallery通过绝对定位留在原位置，阴影不会被任何容器裁剪
• 如果需要适配响应式布局，可以把top的计算值换成相对单位，或者用媒体查询调整位置

问题2：strip元素有时渲染有时不渲染 #

常见原因 #

最可能的情况是.strip在flex布局中被意外压缩：.root是flex-direction: column，.strip默认flex-shrink: 1，当视口高度过小时，浏览器会自动压缩它的高度，极端情况下可能被压到0，看起来像是没渲染。另外也可能是浏览器重绘缓存、JS动态修改DOM/样式导致的偶发问题。

解决方案 #

给.strip添加flex-shrink: 0，强制它保持设置的120px高度，不会被flex容器压缩：

.strip { 
  height: 120px; 
  background-color: rgb(111, 0, 255);
  flex-shrink: 0; /* 关键：禁止压缩，确保高度稳定 */
}

如果偶发问题还存在，可以排查：

• 是否有JS代码动态修改.strip的display、visibility或opacity属性
• 浏览器缓存问题，尝试强制刷新页面（Ctrl+F5）测试
• 是否有优先级更高的CSS选择器覆盖了.strip的样式

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