线性渐变始终在底部

Question

我在div内有一个div和一个svg，可以垂直滚动。

Here代码：

#container {
      position: relative;
      width: 100%;
      height: 400px;
      overflow-y: scroll;
      border: 1px solid black;
    }
    
    #gradient {
      width: 100%;
      height: 200px;
      position: absolute;
      background-image:
         linear-gradient(to top, rgba(66, 134, 244, 1), rgba(255, 255, 255, 0));
      bottom: 0;
    }

<div id='container'>
      <svg viewbox="0 0 400 400">
        <path d="M 200 100 l 100 200 l -200 0 Z"></path>
      </svg>
      <div id='gradient'/>
    </div>

我想在这两个元素上方放置线性渐变，并且始终将其放置在容器div的底部。

这里有一些例子。

无论滚动如何，渐变始终位于div容器的末尾。 我该怎么办？