Fixed element with scrolling overflow

Hi, folks. I’m working on a developer portfolio with a “projects” section, where each project is represented by a tile, with an image, a title, an info icon that expands a full-page explanation of the project, and a Github icon that links to the project’s code. The problem I’m having is that I’ve made the full-page explanation of each project fill the screen by making it a fixed element, which means that if the content takes up more than the size of the screen, it gets lost. I’ve added overflow: scroll to these elements, and that allows me to see a portion of the overflow, but the top of the content is always lost. If anyone has any suggestions on how I might get around this, I would be most appreciative.
A codepen of the site can be found here. The second tile has too much information for the screen to demonstrate the problem. This tooltip element has a class of tile-tooltip in the CSS.
Thanks for your time!

Hello Luos.

For CodePen, you are not supposed to include any HTML outwith the body tag. CodePen takes care of most of this. So, do not link to your internal CSS, and JavaScript. Also, all of your meta and link tags should go in the settings section of the CodePen HTML. Click on the settings, then paste it into the appropriate box.