如何解决父Div内两个子Div浏览器缩放时宽度重叠问题

这个问题我碰到过好多次了——本质是浏览器处理百分比宽度时的像素舍入误差搞的鬼：当缩放比例不是100%时，75%+25%的宽度换算成实际像素后，可能因为小数取整导致总和超过父容器的可用宽度，最终触发重叠。要实现像目标页面那样任意缩放都保持比例不重叠的效果，Flexbox是最可靠的解决方案，它天生就是为这种弹性比例布局设计的。

具体修改步骤 #

1. 重构CSS布局，改用Flexbox #

首先把父容器改成Flex容器，移除子元素的float属性，用flex比例来分配空间：

.contentDiv { 
  padding-bottom: 2em; 
  padding-top: 2em; 
  min-height: 25em; 
}
.sectionDiv { 
  border: none; 
  border-radius: 3px; 
  margin-top: -3px; 
  margin: 0 0 1em 0; 
  background: #f2f2f2; 
  padding: 1em; 
  color: #333; 
  position: relative; 
  overflow: visible;
  /* 核心改动：将父容器设置为Flex布局 */
  display: flex;
  /* 可选：如果需要两列之间留空隙，添加gap属性，比如gap: 1em; */
}
/* 移除float，用flex属性控制宽度比例 */
div.assessment-doc-div { 
  flex: 3; /* 占3份，对应75%的比例 */
  overflow: auto; 
  height: 100vh; 
  min-height: 400px; 
}
div.assessment-rubric-div { 
  flex: 1; /* 占1份，对应25%的比例 */
  overflow-y: auto; 
  height: 100vh; 
  min-height: 400px; 
}

2. 修正HTML中的类名（关键！） #

我注意到你的HTML里子Div的类名是assessment-doc和assessment-rub-div，但CSS选择器是assessment-doc-div和assessment-rubric-div，这会导致样式完全不生效。必须统一类名，比如修改HTML如下：

<div class="contentDiv" id="doc">
  <div id="currentSubmission" class="sectionDiv">
    <!-- 修正类名，和CSS选择器匹配 -->
    <div class="assessment-doc-div" style="overflow-x: hidden;">
      <iframe id="sub15031550Iframe0" name="sub15031550Iframe0" width="100%" height="983px" scrolling="no" frameborder="0">IFRAME CONTENT </iframe>
    </div>
    <!-- assessment-doc-div -->
    <!-- 修正类名，和CSS选择器匹配 -->
    <div class="assessment-rubric-div">
    </div>
    <!-- assessment-rubric-div -->
  </div>
  <!-- CurrentSubmission -->
</div>
<!-- contentDiv -->

另外，把iframe的固定宽度1277px改成100%，让它自适应父容器的宽度，避免超出或留白。

3. 实现iframe的动态加载 #

要在页面完全加载后再加载iframe内容，添加以下JS代码：

window.addEventListener('load', function() {
  const targetIframe = document.getElementById('sub15031550Iframe0');
  // 动态设置iframe的src属性
  targetIframe.src = 'document/2339389/15031550?doc=10882892';
});

这样能确保页面所有元素都加载完成后再加载iframe内容，避免提前加载导致的布局偏移。

为什么这个方案能解决问题？ #

Flexbox会自动计算父容器的可用空间，按照你设置的flex比例（3:1）精确分配给两个子Div，不管浏览器怎么缩放，都会保持这个比例，完全不会出现因像素舍入导致的总和超宽问题。而且Flexbox的兼容性非常好，几乎所有现代浏览器都支持，不用考虑兼容问题。

如果你暂时不想用Flexbox，也可以尝试用calc()微调宽度（比如width: calc(75% - 1px)），但这种方式需要手动处理像素误差，不如Flexbox稳定可靠。

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