Html 如何防止div重叠

我正在处理一些代码，但遇到了一个样式问题

我正处于创建“页面生成器”的早期阶段，但是一些div相互重叠

带圆圈的内容就是我想要阻止的一个例子，因为这些div与侧边栏重叠，超出了预览区域

我将如何着手修复此样式

代码笔：

HTML

---

实际的问题在于侧边栏，它是过度扩展的

从中删除宽度：100%

#页面生成器#页面生成器侧菜单#页面生成器属性{}
#页面生成器#页面生成器侧菜单#topMenuParent{}

实际的问题在于侧边栏，它是过度扩展的

从中删除宽度：100%

#页面生成器#页面生成器侧菜单#页面生成器属性{}
#页面生成器#页面生成器侧菜单#topMenuParent{}

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

#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;
}