CSS within Electron: Only allow overflow in specific direction

Question

I'm trying to create a tool/navbar that doesn't move, and with content filling the rest of the screen but that cannot overflow into the toolbar (which is the current behavior). So the content class should only allow the stack to overflow (no pun there at all) in the downward direction. Google get's confused with the keywords necessary to describe the issue. Eventually I want to add a pop-up side bar menu as well, but I suppose that's just a matter of enclosing all the current code in a div and sliding that around when the side bar button is clicked. Here's the code:

.container{
height: 95vh;
width: 100vw;
max-width: 100%;
display:flex;
flex-direction: column;
justify-content:center;
align-items: center;
margin: 0px;}

.content {
    display: flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex-grow: 1;
  }

 .toolbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
flex-shrink: 0;
display: flex;
align-items: center;
background-color:maroon;

}

Here's the html:

<div class="toolbar" role="banner">
<img src='sidebar_button.jpg'>
<span>Home</span>
</div>
  <div class="container">

  <div class="content">
    <!-- Resources -->
</div>
</div>

Answer 1

Provided I correctly understand what you are asking for - a header with that does not move when scrolled, and content below it that will scroll but will not appear over the top-bar - the solution is pretty simple.

Really, you just need to give your top-bar a position: fixed. That keeps it from scrolling and creates a new "stacking context" for that meaning that it is, by default, displaying on top of everything else. I have created a little demo to showcase this below.

body {
  height: 200vh;
  margin: 0;
  font-family: "Segoe UI Variable Text", system-ui, ui-rounded, sans-serif;
}
.topbar {
  background-color: #8CB0C8;
  position: fixed;
  width: 100vw;
  height: 64px;
  top: 0;
  left: 0;
  display: grid;
  align-content: center;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.16);
}
h1 {
  margin: 0;
  font-family: "Segoe UI Variable Display", system-ui, ui-rounded, sans-serif;
  font-weight: 500;
}
.content {
  width: 100%;
  max-width: 1080px;
  margin: 72px auto 0;
}

<div class="topbar">
  <h1 class="icon">🧔</h1>
</div>
<div class="content">
  <h1>This is your content</h1>
  <p>This is a whole lot of content...</p>
</div>