Css 如何将两列的高度设置为较小列的高度

我有两个专栏，如所示。我正在寻找一个只使用CSS的解决方案（显然允许使用flexbox），将左栏的高度设置为右栏的高度（较小的一个），这样它就可以获得自己的滚动条。有没有办法做到这一点？这是钢笔里的密码

HTML:

CSS:

当您想让它动态时，请使用Javascript
示例JS代码：

$(document).ready(
  function()
  {
    var lenContent = $(".content").height;
    $(".container").css("max-height", lenContent);
  }
)

---

谢谢，

这似乎很好用：

在包装器中包装

.list

（例如

.list-outer

）

将

.list

的样式应用于

。改为将外部

的样式应用于

将

列表的
高度设置为
0

---

更好的办法是在

.list

上设置

.max height

，而不是

.container

。但我一直在寻找一个CSS唯一的解决方案，将其设置为

.content

的高度，而不管它是什么。

.container {
  display: flex;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.list {
  flex: 1;
  overflow-y: auto;
}

.content {
  flex: 4;
}

.container {
  display: flex;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  overflow-y: auto;
  max-height: 150px;
}

.list {
  flex: 1;
}

.content {
  flex: 4;
}

$(document).ready(
  function()
  {
    var lenContent = $(".content").height;
    $(".container").css("max-height", lenContent);
  }
)