Flex 布局双列等高：巧妙解决高度不一致问题
在网页布局中，常常需要实现两列等高的效果。本文将分析并解决一个使用 Flex 布局实现双列等高时遇到的高度问题。
问题： 使用 Flex 布局创建左右两列，左侧（left）宽度为 50%，设置了 height: 300px；右侧（right）宽度也为 50%，但高度未设置，导致右侧高度无法与左侧一致。
原始代码：
.parent {
display: flex;
height: 200px; /* 限制了父元素高度 */
border: solid darkcyan 1px;
overflow-y: auto;
}
.left {
background: lightblue;
height: 300px; /* 超出父元素高度 */
width: 50%;
}
.right {
width: 50%;
background-color: lightcoral;
}
由于 .parent 的高度被限制为 200px，而 .left 的高度为 300px，超过了父元素的高度，导致布局异常。同时，Flex 布局中，子元素高度默认由内容撑开，如果内容不足，则不会影响父元素高度。
解决方案：
移动端UI&微信UI YDUI Touch
下载
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
为了解决这个问题，我们可以添加一个中间容器，让 .left 和 .right 作为这个中间容器的子元素。这个中间容器的高度将由其子元素内容撑开，从而保证两列等高。
修改后的代码：
.parent {
display: flex;
/* height: 200px; 移除高度限制，或根据实际情况调整 */
border: solid darkcyan 1px;
overflow-y: auto;
}
.box {
display: flex; /* 将中间容器也设置为Flex布局 */
width: 100%; /* 确保中间容器占满父容器宽度 */
}
.left {
background: lightblue;
height: 300px;
width: 50%;
}
.right {
width: 50%;
background-color: lightcoral;
}
通过添加 box 容器，并将 .left 和 .right 放入其中，box 的高度会根据其子元素的高度自动调整，从而使两列等高。 parent 容器的高度限制可以移除或调整为合适的值，以适应内容的高度。 重要的是，box 本身不需要设置高度。 同时，将box也设置为Flex布局，确保其子元素能够正确地进行Flex布局。
通过这个方法，我们成功地利用 Flex 布局实现了双列等高的效果。
