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

这似乎工作正常：

将.list包裹在包装器中（比如.list-outer）
将.list的样式应用于.list-outer而不是
将height的{{1}}设置为.list

Answer 2

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);
  }
)

谢谢，

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

2 个答案: