如何让iframe根据div#in的宽度变化填充div#di的剩余空间

实现方案 #

你已经给父容器div#di配置了flex布局，只需要给iframe补充少量CSS样式，不需要修改HTML或额外写JS，就能实现div#in宽度变化时iframe自动填充剩余空间的效果。

完整修改后的CSS代码 #

#di{
  display: flex;
  border:1px solid red;
}
#in{
  display: block;
  border:1px solid blue;
  height: 56px;
  width: 50px;
  resize: both;
  overflow: auto;
}
/* 新增iframe样式规则 */
iframe {
  flex: 1;
  border: none;
  /* 如果需要iframe高度和左侧#in保持一致，保留下面这行即可 */
  height: 56px;
}

实现逻辑 #

• flex布局下给子元素设置flex:1，表示该元素会自动占满父容器内其他子元素占用后的全部剩余空间，父容器尺寸变化时会自动重新计算适配
• 左侧div#in设置了resize: both支持手动拖动调整宽度，调整后父容器剩余空间实时更新，iframe会自动适配新的宽度

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