Как обойти обрезку элемента при overflow: auto у контейнера?

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

Как сделать чтобы блок имел overflow: auto, появлялся скролл при его переаолнении и при этом его дочерние элементы спозиционированные absolute не обрезались?

<div class="container">
  <div class="absolute"></div> /* Элемент декора должен выходить за границы блока */
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
css html
Источник: Stack Overflow на русском

Ответы

▲ 1

Нужно для item'ов добавить свою обёртку с overflow: auto и назначить этой обёртке 100% высоты от контейнера:

.container {
  max-width: 500px;
  margin: 0 auto;
  border: 1px solid gray;
  padding: 0 15px;
  position: relative;
  height: 400px;
}
.absolute {
  position: absolute;
  color: white;
  background-color: red;
  padding: 20px;
  top: 50px;
  right: -50px;
}
.overflow {
  height: 100%;
  overflow: auto;
}
.item {
  padding: 50px;
  margin: 20px 0;
  border: 1px solid green;
}
<div class="container">
  <div class="absolute">элемент декора</div>
  <div class="overflow">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>