如何使用CSS使不同背景的2列高度相等

Question

我有两列(使用Wordpress#Primary和#Secondary(，每一页都有不同长度的内容。每列都有自己的背景样式，一个是渐变(#primary(，另一个是背景图像(#Secondary(。

当每列在高度上具有不同数量的内容时，渐变或图像只会向下移动到列中的内容。

如何使列样式为较长列高度的100%？

Answer 1

使用flex。

.container {
border: 2px solid green;
padding: 20px;
display: flex;
}
.container>div {
border: 1px solid black;
background: #ececec;
padding: 10px;
margin-left: 10px;
flex: 1;
}

<div class="container">
<div>Div 1 Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1Div 1</div>
<div>Div 2</div>
</div>