为何仅内层.content容器存在overflow时，外层.draggable容器也会滚动？

你的问题根源在于**.draggable容器设置了overflow: auto，导致整个容器（包括标题栏）成为滚动区域**。要实现标题栏固定、内容区单独滚动，需要调整布局结构和样式：

核心修改步骤 #

1. 调整.draggable的布局方式，使用Flexbox让标题栏和内容区垂直分布，同时移除它的overflow: auto：

.draggable {
  position: absolute;
  border: 1px solid #ccc;
  background: #fff;
  /* 移除 overflow: auto */
  display: flex;
  flex-direction: column;
  height: 300px; /* 设置固定高度，根据需求调整 */
}

2. 固定标题栏高度，防止被内容区挤压：

.title {
  padding: 8px;
  background: #f0f0f0;
  cursor: move;
  flex-shrink: 0; /* 禁止标题栏缩小 */
}

3. 让内容区占据剩余空间并独立滚动：

.content {
  padding: 8px;
  flex: 1; /* 占据容器剩余高度 */
  overflow-y: auto; /* 仅内容区滚动 */
}

效果说明 #

修改后，.draggable作为固定高度的容器，标题栏会始终固定在顶部，只有内容区在内容超出时单独滚动，不会带动标题栏一起移动。

内容的提问来源于stack exchange，提问作者irregularpolygon