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

Question

我有两列，如这支笔所示。我正在寻找一种仅使用 CSS 的解决方案（显然允许使用 flexbox）将左列的高度设置为右列（较小的列）的高度，以便它获得自己的滚动条。有没有办法实现这一目标？这是笔的代码......

HTML：

<div class="container">
  <ul class="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>

  <div class="content">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti ipsa nihil quisquam obcaecati labore exercitationem, suscipit placeat. Aut soluta odit fuga vel sed est. Quod quisquam impedit libero. Laboriosam, magni!</p>
  </div>
</div>

(S)CSS：

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

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

.content {
  flex: 4;
}

Answer 1

CSS：

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

.list {
  flex: 1;
}

.content {
  flex: 4;
}

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

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

谢谢你，