div高度不统一：如何让menu-parent与content-parent等高？浏览器布局差异解析

一、让menu-parent高度匹配content-parent的方法 #

咱们可以利用Flexbox的原生特性来解决这个高度对齐问题，步骤如下：

1. 先确保外层的main容器设置为display: flex，并且给它一个明确的高度（比如height: 100vh撑满视口，或者height: 100%继承父级高度，具体看你的整体布局）。
2. 给menu-parent设置flex: 0 0 [你的菜单固定宽度]（比如flex: 0 0 220px），这样它的宽度固定，同时作为flex容器的子元素，会自动拉伸高度来匹配同容器内的content-parent。
3. 给content-parent设置flex: 1，让它占据容器的剩余空间，这样两者的高度就会自动对齐了。

举个实用的CSS示例：

/* 全局统一盒模型，避免默认样式干扰 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

main {
  display: flex;
  height: 100vh; /* 让main撑满整个视口高度 */
}

.menu-parent {
  flex: 0 0 220px; /* 固定宽度，不缩放 */
  background-color: #f5f5f5;
}

.content-parent {
  flex: 1; /* 占据main的剩余空间 */
  background-color: #fff;
}

因为info-bar嵌套在main内，只要它是content-parent的子元素，就不会影响这个高度匹配逻辑。

二、EdgeHTML 15、Chrome 64、Firefox 58布局不一致的原因 #

你提到的这几个浏览器版本，虽然都支持标准Flexbox，但在细节实现上还有差异：

• EdgeHTML 15的兼容性短板：这个版本的Edge对Flexbox的部分特性支持不完善，比如flex容器未设置明确高度时，子元素的拉伸逻辑、align-items的默认行为处理，和Chrome/Firefox有区别。比如如果main没设高度，Edge可能不会让menu-parent自动跟随content-parent的高度拉伸，而Chrome和Firefox会智能处理。
• Firefox 58的细节差异：Firefox 58在处理flex-basis计算、内容溢出时的高度继承上，和Chrome有细微区别。比如当content-parent内的内容高度超过容器时，Firefox可能不会自动让menu-parent同步拉伸，这时候把main的height换成min-height就能解决。
• 浏览器默认样式差异：不同浏览器的默认样式（比如body的margin、div的默认内边距）也会导致布局偏移，所以开头设置全局box-sizing: border-box和清除默认边距很有必要。

另外，虽然大部分属性不需要前缀，但EdgeHTML 15偶尔还是需要-ms-前缀兼容，比如：

.menu-parent {
  -ms-flex: 0 0 220px;
  flex: 0 0 220px;
}

总结 #

1. 给main设置display: flex和明确高度/最小高度，让menu-parent和content-parent作为flex子元素，就能轻松实现高度匹配。
2. 跨浏览器差异主要源于旧版Edge的Flexbox实现不完善，以及不同浏览器的细节处理逻辑不同，通过统一盒模型、添加必要前缀、明确容器高度可以解决大部分问题。

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