相邻Flexbox列高度异常问题求助：Div未识别相邻Div高度

嘿，我看你在折腾相邻Flexbox列的高度对齐问题，这事儿我之前也碰到过，咱们来捋捋怎么解决！

问题根源 #

从你贴的代码片段来看，你在col-md-6里面又嵌套了一个container类，这会打乱Bootstrap Flex布局的高度继承逻辑，直接导致两列高度没法自动对齐。另外有时候自定义样式不小心覆盖了Flex容器的默认属性，也会出现这种情况。

具体修复方案 #

咱们分几步来搞定：

• 移除多余的嵌套容器
  把col-md-6里面的container类删掉，别让多余的层级干扰布局，这样列才能正确继承父容器的Flex属性。

• 显式锁定Flex对齐属性
  Bootstrap的row默认就是Flex容器，但为了保险起见，咱们可以给它加上align-items-stretch类，强制让所有子列高度拉伸对齐（这其实是默认值，但有时候自定义样式会把它覆盖，显式写出来更稳妥）。

修改后的代码示例：

<div class="container">
  <div class="row align-items-stretch">
    <div class="col-md-6">
      <div id="div1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde ex iure consequuntur. Soluta reprehenderit ab eos natus. Officiis corporis, cupiditate labore minima molestias mollitia obcaecati ex inventore odit officia quaerat. Ea sit hic quis...
      </div>
    </div>
    <div class="col-md-6">
      <div id="div2">
        <!-- 这里放另一列的内容 -->
      </div>
    </div>
  </div>
</div>

• 让内部元素占满整列高度（可选）
  如果你的div1、div2需要完全填充所在列的高度，可以给它们加上Bootstrap的h-100工具类，或者写自定义CSS：

#div1, #div2 {
  height: 100%;
  display: flex;
  flex-direction: column;
}

这样调整完，两列的高度就能完美对齐啦！

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