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

Question

我有两列，如 this pen 所示.我正在寻找一种纯 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

这似乎工作正常:

1. 将 .list 包装在包装器中(比如 .list-outer)
2. 将 .list 的样式应用于 .list-outer 而不是
3. 将 .list 的 height 设置为 0