Javascript 试图将标题粘贴到DIV顶部，并在其下方滚动内容

我正在做一个CSS/HTML小项目，我遇到了麻烦。希望我能在这里得到一些帮助。以下是我正在使用的UI的链接：

我想做的是让项目标题粘贴到容器div的顶部，并让所有项目滚动到它下面，而不与标题重叠

这是我的容器的CSS：

.projectContainer {
  background-color: rgba(0, 0, 0, 0.15);
  width: 30%;
  height: 50%;
  border-radius: 2em !important;
  margin: 1em;
  overflow-y: auto;
  position: relative;
}

这是我为标题准备的CSS

.projectHeader {
  position: absolute;
  padding-left: 35%;
  top: 0;
  height: 1.5em;
}

编辑：我还添加了一些我正在使用的HTML：

<div class = "projectContainer">
  <div class="name projectHeader">Projects</div>
  <div class="projectThumbnail">
    <a href="http://lunchline.herokuapp.com" target="_blank">
      <i class="fa fa-cutlery fa-3x"></i>
        <p>LunchLine</p>
    </a>
  </div>
  MORE PROJECT THUMBNAILS HERE
</div>

这显然不起作用，因为标题与其他内容一样滚动。我尝试在标题上使用position:sticky，问题是所有内容都滚动到标题文本下方，而不是整齐地结束在标题div的底部。如果有人能为我指引正确的方向，我将不胜感激

另外，作为一个旁注：有没有一种方法可以摆脱那种呆板的滚动条，让拇指出现，并且只有在我真正滚动的时候才会出现

谢谢大家

编辑： 这是一把JS小提琴

---

我试着把它拆开，只剩下容器和其他东西，所以看起来很凌乱，但我认为这基本上说明了我在做什么

我认为您最大的问题是您将溢出放在主div上，而不是内容div上

.集装箱{ 背景：灰色； 颜色：白色； 宽度：400px； 高度：400px； 显示器：flex； 弯曲方向：立柱； } .内容{ 弹性：1； 溢出：自动； } 标题 内容内容内容内容内容内容内容内容内容内容

---

您介意创建一个JSFIDLE或使用包含所有相关源代码的JSFIDLE吗。。。谢谢，当然可以。我将拼凑一个JS小提琴并编辑这个。一秒完成。我很高兴能帮上忙。