css 父项和子项均溢出 div

Question

我正在尝试在一个容器中显示两个列表，其中：

标签列表始终固定在左侧
由于内容较长，内容列表可以水平滚动
在容器中的任何位置垂直滚动时，两个列表应作为一个整体滚动

我目前的做法远不能令人满意——标签列表不固定；在内容列表中垂直滚动时，标签列表不滚动。

如何解决？

这是片段：

#container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  display: flex;
  overflow-y: auto;
}

#labelList {
  flex: 0 0 100px;
  background-color: dodgerblue;
}

#contentList {
  flex: 1 0 auto;
  background-color: lightgray;
  overflow-x: scroll;
}

.row {
  height: 50px;
}

<div id="container">
  <div id="labelList">
    <div class="row">label</div>
    <div class="row">label</div>
    <div class="row">label</div>
    <div class="row">label</div>
  </div>
  <div id="contentList">
    <div class="row">super super super super super duper long text</div>
    <div class="row">super super super super super duper long text</div>
    <div class="row">super super super super super duper long text</div>
    <div class="row">super super super super super duper long text</div>
  </div>
</div>

这里是 codepen。

Answer 1

此方法使用一些 javascript 来设置内容的高度，这是我在创建布局时运行遇到的唯一限制。您可以通过删除脚本来查看问题。可能会有更好的答案...

var content = document.querySelector('#contentList'),
  numberOfRows = content.children.length;

content.style.height = (numberOfRows * 50) + "px";

#container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  display: flex;
  overflow-x: hidden;
  position: relative;
}

#labelList {
  min-width: 100px;
  background-color: dodgerblue;
  position: absolute;
}

#contentList {
  background-color: lightgray;
  margin-left: 100px;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
}

.row {
  height: 50px;
}

<div id="container">
  <div id="labelList">
    <div class="row">label</div>
    <div class="row">label</div>
    <div class="row">label</div>
    <div class="row">label</div>
  </div>
  <div id="contentList">
    <div class="row">super super super super super duper long text</div>
    <div class="row">super super super super super duper long text</div>
    <div class="row">super super super super super duper long text</div>
    <div class="row">super super super super super duper long text</div>
  </div>
</div>

css 父项和子项均溢出 div

css overflow on both parent and child div

html

css

overflow