Question

我试图在容器中显示两个列表：

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

我目前的做法远非令人满意 - 标签清单并未修复;当在内容列表中垂直滚动时，标签列表不会滚动。

如何解决？

这里的片段：

＆＃13;

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

＆＃13;

<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>

＆＃13;

这里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>

父和子div上的css溢出

1 个答案: