Модальное окно со скроллом контена и фиксированной шапкой

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

Всем привет! Не могу сделать модальное окно, с фиксированной шапкой и скроллом контента. Контент скроллится не до конца, только несколько первых элементов. Маленкая высота указана для примера.

.cart {
  position: relative;
  overflow: hidden;
  width: 65%;
  height: 200px;
  margin: 100px auto;
  background-color: #fff;
  border-radius: 10px;
  z-index: 200;
}

.cart__content {
  height: 100%;
}

.cart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #D9D9D9;
  padding: 20px;
  margin-bottom: 20px;
}

.cart__title,
.cart__btn {
  font-size: 28px;
}

.cart__items {
  height: 100%;
  padding: 0 20px;
  overflow-y: auto;
}

.cart__item {
  margin-bottom: 15px;
}

.cart__wrapper {
  position: fixed;
  z-index: inherit;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .8);
}
<div class="cart__wrapper">
  <div class="cart">
    <div class="cart__content">
      <div class="cart__header">
        <h4 class="cart__title">Cart</h4>
        <button class="cart__btn">&#10006;</button>
      </div>
      <ul class="cart__items">
        <li class="cart__item">Item 1</li>
        <li class="cart__item">Item 2</li>
        <li class="cart__item">Item 3</li>
        <li class="cart__item">Item 4</li>
        <li class="cart__item">Item 5</li>
        <li class="cart__item">Item 6</li>
        <li class="cart__item">Item 7</li>
      </ul>
    </div>
  </div>
</div>

Ответы

▲ 0Принят

Достаточно добавить для .cart__content следующие свойства: display: flex; flex-direction: column;

.cart {
  position: relative;
  overflow: hidden;
  width: 65%;
  height: 200px;
  margin: 100px auto;
  background-color: #fff;
  border-radius: 10px;
  z-index: 200;
}

.cart__content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #D9D9D9;
  padding: 20px;
  margin-bottom: 20px;
}

.cart__title,
.cart__btn {
  margin: 0;
  font-size: 28px;
}

.cart__items {
  height: 100%;
  padding: 0 20px;
  overflow-y: auto;
}

.cart__item {
  margin-bottom: 15px;
}

.cart__wrapper {
  position: fixed;
  z-index: inherit;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .8);
}
<div class="cart__wrapper">
  <div class="cart">
    <div class="cart__content">
      <div class="cart__header">
        <h4 class="cart__title">Cart</h4>
        <button class="cart__btn">&#10006;</button>
      </div>
      <ul class="cart__items">
        <li class="cart__item">Item 1</li>
        <li class="cart__item">Item 2</li>
        <li class="cart__item">Item 3</li>
        <li class="cart__item">Item 4</li>
        <li class="cart__item">Item 5</li>
        <li class="cart__item">Item 6</li>
        <li class="cart__item">Item 7</li>
      </ul>
    </div>
  </div>
</div>