时间戳

首页 > 解决方案 > 父子div上的css溢出

html - 父子div上的css溢出

问题描述

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

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

如何解决？

这是片段：

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

标签： htmlcssoverflow

解决方案

这种方法使用一些 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>

推荐阅读