Прокручиваемый блок внутри ограниченного блока с элементами

Рейтинг: 1Ответов: 1Опубликовано: 29.01.2023

Попытаюсь объяснить по лучше, чего я хочу для начала на словах.

У нас есть блок, допустим он height: 150px, внутри него может быть (ну точнее будут) еще несколько блоков неизвестной высоты и блок, который должен занять оставшееся пространство и иметь прокрутку.

Скорее всего код будет более нагляднее, с чем я сталкиваюсь:

body { margin: 15px; }

.block
{
  height: 150px;
  width: 500px;
  
  padding: 5px;
  
  border: 1px solid #000;
}

.block div:not(:last-child)
{
  margin-bottom: 10px;
}

.block-overflow
{
  border: 1px solid #DC4242;
  overflow-y: auto;
  
  height: 100%;
}
<div class="block">
  <div>Test</div>
  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    Sint, blanditiis corrupti perferendis nobis tempora
  </div>
  
  <div class="block-overflow">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non, dolores! Ratione facilis nam sint delectus laudantium. Delectus itaque esse quaerat voluptatibus provident reiciendis mollitia enim, tenetur vitae inventore aliquam exercitationem ut ratione dignissimos. Molestias saepe eum vitae quisquam iste excepturi cum et ipsa incidunt. Eum facere dolorum aspernatur perferendis voluptates, unde alias officiis quas illo blanditiis. In, repudiandae beatae. Deleniti nihil eos delectus soluta unde consequatur maiores mollitia expedita accusantium aperiam nam quas omnis id optio a error vitae iusto natus consequuntur, quos voluptate modi. Magni expedita natus suscipit non veritatis amet, quo accusantium tenetur odio eveniet blanditiis officia corrupti!
  </div>
<div>

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

Спасибо за уделенное время.

css html
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Можно вот так это сделать. Это должно избавить Вас от мучений:

body {
  margin: 15px;
}

.block {
  /*Предписываем блоку стать контейнером сетки. Сетка
  это вертикальные линии пересекающие горизонтальные линии (grid line)
  и образующие клетки сетки (grid cell). В которых можно
  размещать элементы сетки (grid items).*/
  display: grid;
  /*Автоматически будет создано две вертикальные линии образующие
  столбец на всю ширину контейнера (grid track). Команда `grid-template-rows`
  создает вертикальные линии которые образуют строки (grid tracks).
  Команда `repeat` будет в цикле создавать заданное
  количество строк. `auto-fit`при помощи "хитрых"
  математических формул заставит `repeat` создать столько
  строк сколько поместится в контейнере
  и распределит элементы сетки (grid items) по ячейкам сетки (grid cell)
  автоматически.
  Остальные строки (grid tracks) кому не достанется элементов схлопнуться.
  В нашем случае мы имеем три элемента два из которых
  имеют определенную высоту, а третий резиновый (его контент может сжиматься).
  Так как элементы сетки не могут выходить за пределы сетки контейнер
  будет поделен на три фракции по одной фракции на элемент (1fr).
  Первый и второй элемент поместятся на всю свою высоту, а третий будет
  ужат до размера оставшегося после размещения первых двух элементов.*/
  grid-template-rows: repeat(auto-fit, 1fr);
  height: 150px;
  width: 500px;
  padding: 5px;
  border: 1px solid #000;
  overflow: none;
}

.block div:not(:last-child) {
  margin-bottom: 10px;
}

.block-overflow {
  border: 1px solid #DC4242;
  overflow-y: auto;
}
<div class="block">
  <div>Test</div>
  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, blanditiis corrupti perferendis nobis tempora
  </div>

  <div class="block-overflow">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non, dolores! Ratione facilis nam sint delectus laudantium. Delectus itaque esse quaerat voluptatibus provident reiciendis mollitia enim, tenetur vitae inventore aliquam exercitationem ut ratione
    dignissimos. Molestias saepe eum vitae quisquam iste excepturi cum et ipsa incidunt. Eum facere dolorum aspernatur perferendis voluptates, unde alias officiis quas illo blanditiis. In, repudiandae beatae. Deleniti nihil eos delectus soluta unde consequatur
    maiores mollitia expedita accusantium aperiam nam quas omnis id optio a error vitae iusto natus consequuntur, quos voluptate modi. Magni expedita natus suscipit non veritatis amet, quo accusantium tenetur odio eveniet blanditiis officia corrupti!
  </div>
  <div>