переполнение 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>