Проблема з виводом дочірніх елементів flex/grid за межі прокрутки батьківського контейнера [повторення]

3 Березня 2024 в 17:49 109

При створенні модального вікна за допомогою flexbox виникла проблема, яка, здається, пов’язана з браузером. Чи існує відомий спосіб вирішення цієї проблеми або обхідний шлях – або ідеї, як її вирішити.

Проблему, яку я намагаюся вирішити, можна розглянути з двох аспектів. По-перше, потрібно вертикально вирівняти модальне вікно, що працює як очікувалося. По-друге, потрібно забезпечити прокрутку модального вікна ззовні, щоб прокручувався весь модальний вікно, а не його вміст (це дозволяє мати розкривні списки та інші елементи інтерфейсу користувача, які можуть виходити за межі модального вікна – наприклад, власний вибір дати тощо).

Однак, коли поєднуються вертикальне центрування з полосами прокрутки, верхню частину модального вікна може стати недоступною, оскільки воно починає витікати за межі. У вищезазначеному прикладі ви можете змінювати розмір, щоб вимусити переповнення, і це дозволяє прокручувати вниз модального вікна, але не вгору (перший абзац вирізаний).

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow-x: auto;
}
.modal-container .modal-window {
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Опціональна підтримка для підтвердження відповідності з поведінкою прокрутки в IE10
  //-ms-flex-direction: column;
  //-ms-flex-align: center;
  //-ms-flex-pack: center;
  */
  height: 100%;
}
.modal-container .modal-window .modal-content {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  width: 100%;
  max-width: 500px;
  padding: 10px
}

.modal-container {

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

background: rgba(0, 0, 0, 0.5);

overflow-x: auto;

}

.modal-container .modal-window {

display: -ms-flexbox;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

/* Опціональна підтримка для підтвердження відповідності з поведінкою прокрутки в IE10

//-ms-flex-direction: column;

//-ms-flex-align: center;

//-ms-flex-pack: center;

height: 100%;

}

.modal-container .modal-window .modal-content {

border: 1px solid #ccc;

border-radius: 4px;

background: #fff;

width: 100%;

max-width: 500px;

padding: 10px

}

Це впливає (поточний) на Firefox, Safari, Chrome та Opera. Цікаво, що воно правильно працює в IE10, якщо ви розкоментуєте вендорну префіксовану CSS для IE10 – я ще не перевіряв у IE11, але припускаю, що поведінка відповідає поведінці IE10.

Ось посилання на приклад коду (дуже спрощений) https://jsfiddle.net/dh9k18k0/2/.