并排iFrame横向联动缩放问题：docWindow容器未同步调整求助

要实现两个并排iframe的横向拖拽调整，且一个调整时另一个自动适配剩余屏幕空间，需修复原代码中的布局冲突问题，以下是具体方案：

核心问题修正点 #

• 移除容器的position:absolute/relative属性，避免破坏flex布局的空间分配逻辑
• 取消iframe的固定宽度设置，让其随容器尺寸自适应
• 给可拖拽容器配置合理的flex规则，让另一容器自动填充剩余空间

修改后的完整代码 #

CSS 代码 #

/* 外层flex容器，统一管理两个iframe容器的布局 */
.flex-container {
  display: flex;
  gap: 8px; /* 可选：两个容器间的间距 */
  height: 828px;
  margin-top: 100px;
  padding: 0 25px;
}

/* 可横向拖拽调整的容器 */
.resizable {
  resize: horizontal;
  overflow: hidden;
  min-width: 200px; /* 限制最小宽度，防止拖拽过窄 */
  max-width: calc(100% - 225px); /* 限制最大宽度，给右侧容器留基础空间 */
  background-color: #e9e9ed;
  border: thin solid black;
}

/* 自动填充剩余空间的容器 */
.fill-remaining {
  flex: 1;
  background-color: #e9e9ed;
  border: thin solid black;
  min-width: 300px; /* 可选：限制最小宽度 */
}

/* iframe完全适配容器尺寸 */
.resized {
  width: 100%;
  height: 100%;
  border: 0;
}

.ugly {
  background: red;
  border: 4px dashed black;
}

HTML 代码 #

<div class="flex-container">
  <!-- 可拖拽调整的左侧容器 -->
  <div class="resizable ugly" id="container1">
    <iframe class="resized" frameborder="1" id="docWindow" name="docWindow" scrolling="yes" src="placeholder_page.html"></iframe>
  </div>
  <!-- 自动适配的右侧容器 -->
  <div class="fill-remaining ugly" id="container2">
    <iframe class="resized" frameborder="1" id="navbarFrame" name="navbarFrame" scrolling="yes" src="parent-nav-buttons.html"></iframe>
  </div>
</div>

关键改动说明 #

1. 外层用flex-container统一布局，确保两个容器处于同一flex流中，自动分配空间
2. 可拖拽容器通过resize: horizontal实现横向调整，同时设置宽限范围避免布局崩溃
3. 右侧容器用flex:1属性自动填充左侧容器调整后剩余的屏幕空间
4. iframe设置width:100%和height:100%，完全跟随容器尺寸变化

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