如何让父div高度匹配左侧动态内容子div的高度？

方案1：纯CSS Flex实现（推荐） #

无需JS介入，适配所有动态内容场景，实现逻辑如下：

• 父容器设置flex布局，SVG背景直接挂载在父容器上
• 左侧列不指定高度，完全由后端返回内容撑开
• 右侧列强制高度由父容器决定，不参与父容器高度计算
  代码示例：

/* 父容器 */
.bg-row {
  display: flex;
  /* 按需求替换为你的SVG背景地址，设置为占满父容器 */
  background: url(xxx.svg) no-repeat left top / 100% 100%;
  width: 100%;
}
/* 左侧动态高度列 */
.col-1 {
  width: 30%; /* 按需调整左侧宽度 */
  /* 无需设置高度，内容自动撑开 */
}
/* 右侧列 */
.col-2 {
  flex: 1; /* 占满剩余宽度 */
  height: 0;
  min-height: 100%;
  overflow-y: auto; /* 右侧内容超过左侧高度时自动出现滚动条，不会撑开父容器 */
}

提示：如果SVG不需要横向拉伸，可将background-size设置为auto 100%，保证SVG高度适配的同时不变形。

方案2：JS动态同步高度（兼容特殊布局场景） #

如果现有布局限制无法使用CSS方案，可通过ResizeObserver监听左侧高度动态同步给父容器：

const leftColumn = document.querySelector('.col-1')
const parentContainer = document.querySelector('.bg-row')

// 监听左侧列尺寸变化，实时同步父容器高度
const heightObserver = new ResizeObserver(entries => {
  const leftHeight = entries[0].contentRect.height
  parentContainer.style.height = `${leftHeight}px`
})
heightObserver.observe(leftColumn)

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