如何防止div重叠

如何解决如何防止div重叠

我正在玩一些代码，但是遇到样式问题。

我正处于创建“页面构建器”的初期阶段，但是某些div彼此重叠。

带圆圈的内容是我要防止的示例，因为这些div与侧边栏重叠并且超出了预览区域。

我该如何解决这种样式？

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>

介绍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;
}

解决方法

实际问题出在侧边栏，它过度伸展。

从{p>删除width: 100%

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