Trying to get a header to stick to top of DIV and have content scroll beneath it

Question

I'm working on a little CSS/HTML project and I'm running into a wall. Hoping I can get some help here. Here is a link to the UI I'm working on: http://imgur.com/a/yKXk9

What I'm trying to do is have that Projects header sticky to the top of that container div, and have all the items scroll beneath it without overlapping with the header.

This is the CSS I have for my container:

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

And this is the CSS I have for the header.

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

EDIT: I also added a bit of the HTML I'm using:

<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>

This obviously doesn't work as the header scrolls just like everything else. I tried using position: sticky on the header, and the problem with that was that all the content scrolled BENEATH the header text instead of neatly ending at the bottom of the header div. If anyone can guide me in the right direction I'd be very grateful.

Also, as a sidenote: is there a way to get rid of that gotdawful scrollbar and just have the thumb appear (and only appear when I'm actually scrolling)?

Thanks everyone.

EDIT: Here is a JS Fiddle. https://jsfiddle.net/ksy6ahL0/

I tried stripping it down to just the container and stuff so it looks messy but I think it basically shows what I'm trying to do.

Answer 1

I think your biggest problem is that you put the overflow on the main div, not on the content div.

 .container{ background:gray; color:white; width:400px; height:400px; display:flex; flex-direction:column; } .content{ flex:1; overflow:auto; } 

 <div class="container"> <h1 class="header">header</h1> <div class="content">content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br>content<br></div> </div>