如何让两个div无论内容多少均等高？flex-grow属性无效如何解决？

解决方案 #

1. 实现两个div等高效果

flex布局交叉轴（你的flex容器#section_body_6.main .width主轴为横向row，交叉轴对应纵向高度）默认值为stretch，会自动将所有子项拉伸到和最高子项一致的高度。你手动配置了align-items: flex-start，子项会按自身内容高度渲染，是等高失效的核心原因。同时flex-grow仅作用于flex布局的主轴方向，仅控制两个子项的宽度分配，和高度无关，所以调整该属性对等高没有效果。

直接修改flex容器属性即可实现等高：

#section_body_6.main .width {
  width: 90%;
  display: flex;
  justify-content: center;
  /* 把原有flex-start改为stretch */
  align-items: stretch;
}

修改后可以移除两个.inner节点上硬编码的min-height: 600px、max-height:600px属性，flex会自动适配高度，如果你需要保底最小高度也可以保留。

2. 解决左侧图片容器内容溢出问题

移除max-width后图片宽度不会被截断，但高度超出容器时就会溢出，可根据需求选以下方案：

• 方案A：溢出内容滚动
  给左侧图片容器加溢出滚动属性，内容超出时容器内部滚动，不会破坏整体布局：

#section_body_6.main .inner.image {
  padding: 1vw;
  background-color: #fff;
  width: 45%;
  flex: 1 1 auto;
  text-align: center;
  min-height: 600px;
  /* 新增属性 */
  overflow-y: auto;
}

• 方案B：图片自适应容器高度
  给图片加最大高度限制，自动缩放适配容器：

#section_body_6.main .inner.image .main {
  width: 100%;
  max-width: 300px;
  /* 新增属性，数值可根据logo高度、内边距实际情况调整 */
  max-height: calc(100% - 180px);
  object-fit: contain;
}

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