CSS within Electron: Only allow overflow in specific direction

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>


Read more here: https://stackoverflow.com/questions/68485893/css-within-electron-only-allow-overflow-in-specific-direction

Content Attribution

This content was originally published by SuperJayRay at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: