如何使用 CSS 使具有不同背景的 2 列等高？ [复制]

Question

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

当每列的内容高度不同时，渐变或图像只会下降到列中的内容。

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

Answer 1

使用弹性。

.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>