实现屏幕缩小时Content Div自动移至Sidebar Div下方的布局问题

你的问题根源在于绝对定位（absolute）让侧边栏脱离了文档流，再用left:20vw给内容区腾位置的方式，没有响应式的自动换行逻辑——当屏幕宽度不足时，内容区的宽度+left偏移量会超出屏幕，自然就和侧边栏重叠了。

我推荐使用Flexbox布局来解决，它原生支持响应式换行，代码更简洁，也不需要复杂的定位/浮动设置。下面是修改后的完整代码：

<body style="padding: 5px 15px 20px; min-height: 80%; min-height: 50vh; display: flex; flex-wrap: wrap; gap: 10px;">
<h3 class="text-center"> Title </h3>
<div class="SideContainer" style="background-color: green; width: 20vw; min-width: 200px; max-width: 300px; padding: 3px;">
<div style="background-color: red;width: 100%;">Keys</div>
<div style="background-color: blue;">Error Box</div>
<div style="background-color: grey;border: none;width: 100%;border-radius: 3px;">File Menu Button</div>
<p> Enter Display Name</p>
<div style="background-color: yellow;">Name Box</div>
<p> Users Viewing </p>
<div style="background-color: orange;">User box</div>
</div>
<div class="ContentContainer" style="background-color: gold; flex: 1; min-width: 400px; padding: 8px;">
<div style="background-color: purple;border: 1px solid;border-radius: 4px;line-height: 2.6;padding: 3px;margin-bottom: 6px;">Doc Title</div>
<div style="background-color: maroon;min-height: 150px;border: 1px solid;border-radius: 4px;padding: 3px;">Doc Content</div>
</div>
</body>

关键修改点说明： #

• 给body添加了display: flex; flex-wrap: wrap;：这是核心，让侧边栏和内容区成为Flex子元素，当屏幕宽度不足以容纳两者并排时，自动换行到下一行。gap:10px是为了给两个容器之间加一点间距，避免挤在一起。
• 移除了侧边栏的position:absolute; left:0; top:80; bottom:400：绝对定位会让元素脱离文档流，Flex布局不需要这个，侧边栏会正常参与布局。
• 内容区移除了float:left; left:20vw; top:25：换成flex:1，让内容区自动占据侧边栏之外的剩余空间；保留min-width:400px确保内容不会被压缩得太窄。

额外优化建议： #

如果需要更精确的断点控制（比如在某个特定宽度强制换行），可以添加内联样式标签里的媒体查询：

<style>
@media (max-width: 700px) {
  .SideContainer, .ContentContainer {
    width: 100% !important;
    min-width: auto !important;
  }
}
</style>

这样当屏幕宽度小于700px时，侧边栏和内容区都会占满整个屏幕宽度，完全避免拥挤。

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