滚动Flex项目中SVG位置固定问题及解决尝试

我终于摸出一个靠谱的取巧方法，能把伪SVG阴影稳稳固定在滚动Flex项目的底部！之前踩了好几个坑，各种方案都不对劲：

• 用position: absolute时，SVG直接定位到整个Flex容器的底部，完全不跟着滚动的项目走；
• 在Flex项目内嵌套position: relative的容器，滚动起来阴影直接悬浮在容器中间，完全不对位；
• 尝试position: sticky方案，结果滚动到底部时，阴影会因为translateY莫名上移约4px，视觉效果特别别扭。

后来我在布局里新增了第三个Flex项目，直接解决了所有问题！核心代码示例如下：

/* 基础Flex容器样式 */
.flex-container {
  display: flex;
  flex-direction: column;
  height: 300px; /* 固定容器高度触发滚动 */
  overflow-y: auto;
}

/* 可滚动的内容项目 */
.scroll-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

/* 新增的阴影承载项目 */
.bottom-shadow {
  flex-shrink: 0;
  height: 16px; /* 匹配SVG阴影的高度 */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="16" viewBox="0 0 100 16"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:rgba(0,0,0,0.2);stop-opacity:1" /><stop offset="100%" style="stop-color:rgba(0,0,0,0);stop-opacity:0" /></linearGradient></defs><rect width="100%" height="16" fill="url(%23grad1)" /></svg>') bottom center no-repeat;
  background-size: 100% 100%;
}

对应的HTML结构参考：

<div class="flex-container">
  <div class="scroll-content">
    <!-- 这里是长内容，会触发滚动 -->
    <p>大量滚动内容...</p>
    <p>大量滚动内容...</p>
    <!-- 更多内容 -->
  </div>
  <!-- 新增的阴影项目 -->
  <div class="bottom-shadow"></div>
</div>

这个方案的核心逻辑是把阴影从滚动内容里剥离出来，单独放在一个不会被压缩的Flex项目中。因为Flex容器是纵向排列的，这个阴影项目会始终固定在整个滚动区域的底部，不管上面的内容怎么滚动，阴影都能牢牢贴在底部边缘，完美避开了之前所有方案的问题。

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