How to prevent divs from overlapping

Question

I'm playing around with some code, but came across a styling issue.

I'm in the early stages of creating a "Page Builder", but some of the divs are overlapping one another.

The circled content is an example of what I want to prevent, because those divs are overlapping the sidebar and going outside the previewing area.

How would I go about fixing this styling?

Codepen: https://codepen.io/JosephChunta/pen/MWyJoeq

HTML

<div id="page-Builder">
  <div id="page-Builder-Sidemenu">
    <div id="topMenuParent">
      <p>Page Builder</p>
      <button id="addComponentButton" onclick="showComponentList()">+</button>
    </div>
    <div id="page-Builder-Properties">
      
    </div>
  </div>
  <div id="page-Builder-Component-List" style="width: 0;">
    <div id="closeListButton" onclick="hideComponentList()">❌</div>
    <div id="pageComponentText" class="pageComponent" draggable="true" ondragstart="drag(event)">Text</div>
    <div id="pageComponentHeader" class="pageComponent" draggable="true" ondragstart="drag(event)">Header</div>
    <div class="componentBlock" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  </div>
  <div id="page-Builder-Workspace" style="width: 80%;">
    <button id="newBlockButton" onclick="newComponentBlock()">New Block</button>
  </div>
</div>

Relavent CSS

#page-Builder {
  display: flex;
  width: 1200px;
  height: 400px;
  border: 2px solid black;
  overflow: hidden;
}

#page-Builder #page-Builder-Sidemenu {
  width: 20%;
  height: 100%;
}

#page-Builder #page-Builder-Sidemenu #topMenuParent {
  width: 100%;
  height: 15%;
  padding: 5px;
  background: white;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}

#page-Builder #page-Builder-Sidemenu #page-Builder-Properties {
  width: 100%;
  height: 85%;
  background: #ddd;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 5px;
}

#page-Builder #page-Builder-Component-List {
  height: 100%;
  overflow: hidden;
  background: #ccc;
}

#page-Builder #page-Builder-Workspace {
  width: 80%;
  height: 100%;
  background: none;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: center;
}

#page-Builder #page-Builder-Workspace .componentBlock {
  border: 2px solid transparent;
  padding: 10px;
  transition: 300ms;
}

#page-Builder #page-Builder-Workspace .componentBlock:hover {
  border: 2px solid #03A9F4;
  transition: 300ms;
}

#page-Builder #page-Builder-Workspace .componentBlock:empty:after {
  content: '+';
  font-size: 20px;
  font-weight: 800;
}

Answer 1

The actual issue is with the sidebar, it is overextending.

Remove width: 100% from

#page-Builder #page-Builder-Sidemenu #page-Builder-Properties { }
#page-Builder #page-Builder-Sidemenu #topMenuParent { }