Как переполнить один раздел модального окна с помощью CSS

Question

Я создал модальное окно с 2 секциями: header и ul.Я использую jQuery, чтобы открыть модал.Все идет нормально.Моя проблема состоит в том, чтобы ul соответствовал модальному боксу без переполнения.

Я могу переполнить .modal.Но я просто хочу переполнить ul, а не весь .modal блок.

https://jsfiddle.net/tjL1e0ca/

$(document).on("click", "h3", function(e) {
  $(".modal").css("display", "block");
})

.modal {
  display: none;
  position: fixed;
  z-index: 100;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 30px);
  max-width: 650px;
  max-height: calc(100% - 60px);
  padding: 30px 20px 20px;
  /*overflow: auto;*/
  border: 3px solid black;
  background-color: #ccc;
}

.modal_1 ul {
  background-color: red;
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>click here to open modal</h3>

<div class="modal">
  <div class="modal_1">
    <div>
      <h1>HEADER GOES HERE</h1>
      <h2>SUB GOES HERE</h2>
    </div>
    <ul>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
    </ul>
  </div>
</div>

Answer 1

Добавьте style="overflow-y: auto; height: 100px;" к вашему ul.Это в основном добавляет overflow-y к вашему ul, за исключением того, что оно будет работать, только если вы укажете высоту.

Я обновил ваш JSFiddle для вас.

Измените высоту, как вы хотите.

Обновление: Прочитав комментарии, я понял, что вы хотите, чтобы высота ul была адаптивной, а не установленной.Чтобы исправить это, измените высоту с height: 100px; на height: 50%; (и измените процент по своему усмотрению).Таким образом, ul всегда будет составлять 50% от модального значения, независимо от его высоты.Так как здесь, похоже, не работает фрагмент, я сделал для вас JSFiddle .

$(document).on("click", "h3", function(e) {
  $(".modal").css("display", "block");
})

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

h3 {
  cursor: pointer;
}

.list {
  overflow-y: auto;
  height: 100px;
}

.modal {
  display: none;
  position: fixed;
  z-index: 700;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 30px);
  max-width: 650px;
  max-height: calc(100% - 60px);
  padding: 30px 20px 20px;
  /*overflow: auto;*/
  border: 3px solid black;
  background-color: #ccc;
}

.modal_1 ul {
  background-color: red;
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>click here to open modal</h3>

<div class="modal">
  <div class="modal_1">
    <div>
      <h1>HEADER GOES HERE</h1>
      <h2>SUB GOES HERE</h2>
    </div>
    <ul class="list">
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
      <li>item 1</li>
    </ul>
  </div>
</div>