我有一个可滚动的div，它带有一个蒙版，可以使文本向底部淡入。问题：滚动条也被屏蔽了。在我不知道滚动条大小的假设下，如何防止这种情况发生？
额外收获：如何让渐变从底部开始50px，而不使用旧的-webkit-gradient。

#content-wrapper {
  height: 150px;
  width: 200px;
  background-color: rgba(0, 0, 0, 0.2);
}

#content {
  height: 150px;
  width: 200px;
  color: white;
  overflow-y: scroll;
  -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
}

<div id="content-wrapper">
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec libero sodales, feugiat arcu consequat, faucibus orci. Integer facilisis felis id leo iaculis dapibus. Nulla facilisi. Suspendisse potenti. Mauris cursus, erat ut euismod tincidunt, leo magna ullamcorper felis, in blandit felis ipsum mattis ipsum. Suspendisse arcu risus, ultrices et purus sed, blandit molestie turpis. Fusce condimentum eros vitae purus tempus, in iaculis lorem molestie. Integer sagittis eros nec magna vehicula, ut ornare ante consequat. Donec volutpat arcu dui, id dignissim tortor dictum vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam venenatis nulla tellus, vitae vestibulum neque pharetra at. Proin vel posuere sem, nec porta augue. Morbi interdum lorem lorem. Mauris mollis euismod lobortis.
  </div>
</div>