CSS Flex 布局双列高度不一致的解决方案
使用 Flex 布局创建双列布局时，常常遇到左右两列高度不一致的问题，导致页面显示错乱。本文将分析问题原因并提供有效的解决方案。
问题描述：
假设父元素 .parent 使用 Flex 布局（display: flex），包含两个子元素 .left 和 .right。如果 .left 设置了固定高度（例如 height: 300px），而 .right 没有设置高度，则 .left 的高度可能会超出 .parent，导致出现滚动条，而 .right 的高度则被 .parent 限制，造成高度不一致。简单地设置 .right 的高度为 300px 也无法解决问题，因为这会导致 .right 超出 .parent，布局仍然错乱。
立即学习“前端免费学习笔记（深入）”；
问题分析：
问题的根源在于 Flex 布局的特性。当 Flex 容器的高度受限，且子元素高度超过容器高度时，Flex 容器会根据 overflow-y: auto 属性显示滚动条。 .right 的高度受限于父容器 .parent，因此两列高度不匹配。
解决方案：
为了确保两列高度一致，最有效的解决方法是添加一个中间容器。 将 .left 和 .right 包裹在一个新的 div 中，例如命名为 .box。 .box 不需要设置高度，它会根据其子元素的高度自动扩展。这样，.parent 的高度将由 .box 的高度决定，从而使两列高度一致。
修改后的代码结构：
通过添加 .box 这个中间容器，解决了高度不一致的问题，无需再对 .right 的高度进行额外设置。 .left 的高度决定 .box 的高度，而 .box 的高度又决定 .parent 的高度，最终实现左右两列高度一致的布局效果。 这种方法简洁有效，避免了复杂的 CSS 代码和潜在的兼容性问题。
