Html 如何使溢出-y：滚动边框大小的帐户

我想让ul的溢出帐户为它所包含的div的边界

我尝试过添加与边框标记具有相同像素测量值的填充

.resizable {
  background: black;
  width: 80%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.resizable .resizers {
  width: 100%;
  height: 100%;
  border: 3px solid #4286f4;
  box-sizing: border-box;
}

.resizable .resizers .resizer {
  width: 10px;
  height: 10px;
  border-radius: 50%; /* Magic to turn square into circle. */
  background: white;
  border: 3px solid #4286f4;
  position: absolute;
}

.resizable .resizers .resizer.top-left {
  left: -5px;
  top: -5px;
  cursor: nwse-resize;
}

.resizable .resizers .resizer.top-right {
  right: -5px;
  top: -5px;
  cursor: nesw-resize;
}

.resizable .resizers .resizer.bottom-left {
  left: -5px;
  bottom: -5px;
  cursor: nesw-resize;
}

.resizable .resizers .resizer.bottom-right {
  right: -5px;
  bottom: -5px;
  cursor: nwse-resize;
}

#npc_events {
  width: 100%;
  height: 100%;
  flex-grow: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid lightgrey;
  overflow-y: scroll;
}

#npc_events li {
  padding: 10px 10px 10px 10px;
  color: white;
}

说

我希望

中包含的

元素的
文本不会出现在div的蓝色边框上方，但我得到了以下结果：

您的列表溢出（或超出div/出现在行的顶部）的原因是您将标记#npc_事件设置为100%高度，这并没有考虑输入栏（聊天包装器div）

一种解决方案是向.resizers类添加一个填充，并计算类.chat wrapper div的高度，从那里可以向#npc#u events div添加以下内容

height: calc(100% - (height of chat-wrapper));

否则，我建议将聊天包装的高度设置为包装div（.resizers）的某个百分比，并将剩余部分设置为列表的某个百分比。例如：

.resizers {padding: 10px;}
.chat-wrapper {height: 20%;}
#npc_events {height: 80%;}

这会让你得到想要的结果

.resizers {padding: 10px;}
.chat-wrapper {height: 20%;}
#npc_events {height: 80%;}