如何使用CSS使两个具有不同背景的列的高度相等？

我有两个栏目（使用Wordpress的“主要”和“次要”），每个页面的内容长度都不同。每列都有自己的背景样式，一个是渐变（#主），另一个是背景图像（#次）

当每列的内容高度不同时，渐变或图像仅向下延伸到列中的内容

如何将柱样式设置为较长柱高度的100%？

使用flex

.container{
边框：2倍纯绿；
填充：20px；
显示器：flex；
}
.container>div{
边框：1px纯黑；
背景:#ececec ;；
填充：10px；
左边距：10px；
弹性：1；
}

第1分区第1分区第1分区第1分区第1分区第1分区第1分区第1分区第1分区第1分区第1分区第1分区第1分区第1分区第1分区第1分区第1分区第1分区
第2组

谢谢，但我如何将其应用于“主要”（内容）和“次要”（侧栏）？啊哈，我应用于错误的内容：）现在可以用了：）