Как создать двухколоночную разметку с прокруткой без использования JavaScript

Оффтоп javascript
1

Я пытаюсь реализовать двухколоночную разметку, используя только CSS или flexbox, вот мои требования:

  • Родительский блок с двумя колонками и одной строкой
  • Высота обеих колонок определяется содержимым первой колонки
  • Если содержимое второй колонки превышает высоту первой, то оно должно прокручиваться, но высота второй колонки остается фиксированной
  • Я не могу использовать фиксированные значения для высоты, поскольку контент в обоих блоках динамический.

Вот что я создал на текущий момент:

.parent {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
}

.child1 {
  background: #ddd;
  padding: 1rem;
}

.child2 {
  background: #eee;
  padding: 1rem;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.timeslots {
  overflow-y: auto;
  flex: 1 1 auto;
}

<div class="parent">
  <div class="child1">
    Длинное содержимое (определяет высоту)<br>
    Длинное содержимое (определяет высоту)<br>
    Длинное содержимое (определяет высоту)<br>
  </div>
  <div class="child2">
    <div class="timeslots">
      Много контента для прокрутки...<br>
      Много контента для прокрутки...<br>
      Много контента для прокрутки...<br>
      Много контента для прокрутки...<br>
      Много контента для прокрутки...<br>
    </div>
  </div>
</div>

Проблема в том, что вторая колонка продолжает растягиваться по вертикали, и я не могу заставить прокрутку работать как нужно.

2

Замени align-items: start на align-items: stretch в .parent и добавь height: 100% к .child2. Можешь еще попробовать grid-template-rows: min-content — это заставит высоту строки подстроиться под первую колонку. Какой браузер? В старых версиях grid с overflow багует.

3

Проблема в min-height: auto у grid-элементов по умолчанию. Добавь min-height: 0 к .child2 и поставь height: 100%. И замени max-height: 100% на height: 100% - у меня заработало только с явной высотой, а не максимальной. Попробуй, должно сработать.

4

У меня была такая же проблема! Добавь height: 0 к .child2 - вторая колонка перестанет растягиваться. Еще обязательно добавь min-height: 0 к .timeslots, иначе флекс-элементы игнорируют overflow. И проверь, что у .parent есть четкая высота или он в контейнере с заданной высотой. Без этого grid с прокруткой работает криво.