双列布局：动态调整右侧高度
在双列布局中，有时需要右侧的高度与左侧保持一致，但仅靠 css 样式难以实现。本文将介绍如何通过修改 html 结构来解决此问题。
问题：
在以下 html 和 css 代码中，右侧的高度无法与左侧保持一致：
left content
right content
.parent {
display: flex;
height: 200px;
border: solid darkcyan 1px;
}
.left, .right {
width: 50%;
}
.left {
background-color: lightblue;
}
.right {
background-color: lightcoral;
}解决方案：
为了使右侧高度与左侧一致，需要修改 html 结构，在父容器中添加一个额外的容器：
left content
right content
通过创建 box 容器，可以将子元素的高度自由撑开。不需要显式设置 box 的高度，它会自动调整为容纳其内容的高度。因此，右侧的高度现在会动态调整，与左侧匹配。
css 代码保持不变：
.parent {
display: flex;
height: 200px;
border: solid darkcyan 1px;
}
.box {
display: flex;
width: 100%;
}
.left, .right {
width: 50%;
}
.left {
background-color: lightblue;
}
.right {
background-color: lightcoral;
} 
