Как исправить проблему с z-index и переполнением: scroll

Question

код в песочнице: https://codesandbox.io/s/vibrant-microservice-4rplf

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

Я хочу сделать так, как показано на рисунке ниже. Дисплей выбрать более модальным. Я делаю это, удаляя переполнение: прокрутка из модального компонента. Но мне нужно оставить переполнение: прокрутка в случае, если модальное становится больше. Я думаю, что есть проблема с z-index. Не могли бы вы помочь мне решить эту проблему.

.modal-block {
  overflow-y: scroll;
  width: 60% !important;
  max-height: 300px;
  margin-top: 100px;
  background: #fff;
  border-radius: 4px;
  z-index: 1111;
}


.select-wrapper {
  width: 100%;
  position: relative;
  z-index: 1600;
}

Answer 1

Добавьте overflow-y:scroll; в .modal-wrapper и удалите overflow-y: scroll; и max-height: 300px; из .modal-block. Оформить заказ песочнице ссылка Пример песочницы

Answer 2

Просто другое мнение, я думаю, мы могли бы просто применить эффект scroll к текстовому абзацу вместо всего модального блока. Таким образом, вы можете легко установить высоту всего модального блока и его дочернего текстового абзаца при необходимости.

Ссылка: https://codesandbox.io/s/suspicious-curran-pzq5j

Answer 3

Если ваш тэг «Выбрать» идет в конце в модальном, то вы можете сделать так:

Класс .modal-block удалить overflow-y:scroll;

Класс .modal-body добавить overflow-y:scroll;

Переместить .select-wrapper из .modal-body следующим образом

<div class="modal-block">Content</div>
<div class="select-wrapper">SELECT OPTION</div>