Q:

Как правильно сверстать модальное окно?

Написал тестовое модальное окно, но возникла проблема.
Допустим, произошло какое-то событие (например клик) и появилось модальное окно, параметры этого окна:

Запрещено скролить основной контент страницы - сделал.
Фон модального окна (черный-прозрачный) на всю видимую область окна браузера - сделал.
Модальное окно по центру - сделал.
Скролл модального окна, если его высота выходит за пределы окна браузера - сделал.

Вопросы:

При увеличение содержимого (или высоты) модального окна, верхняя часть модального окна оказывается за областью видимости, как быть?
Как Вы реализовали бы подобную задачу с модальным окном? Буду благодарен за любые замечания!

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: fixed;
}

.modal-container {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.modal {
  position: relative;
  background: chocolate;
  padding: 20px;
  flex: 0 0 50%;
  max-width: 50%;
  margin-top: 50px;
  margin-bottom: 50px;
  overflow: auto;
  /*height: 1000px;*/ /*имитируем высоту модального окна в 1000px*/
}

.content {
  background: antiquewhite;
  padding-left: 20px;
  padding-right: 20px;
}
<div class="modal-container">
  <div class="modal">
    Maecenas nec odio et
    antetincidunt tempus. Donec
    vitae sapien ut libero
    venenatis faucibus. Nullam quis
    ante.
  </div>
</div>

<div class="content">
  <p>
    Maecenas nec odio et ante tincidunt
    tempus. Donec vitae sapien ut libero
    venenatis faucibus. Nullam quis ante.
    Etiam sit amet orci eget eros
    faucibus tincidunt. Duis leo. Sed
    fringilla mauris sit amet nibh. Donec
    sodales sagittis magna. Sed
    consequat, leo eget bibendum sodales,
    augue velit cursus nunc,
  </p>
  <p>
    Maecenas nec odio et ante tincidunt
    tempus. Donec vitae sapien ut libero
    venenatis faucibus. Nullam quis ante.
    Etiam sit amet orci eget eros
    faucibus tincidunt. Duis leo. Sed
    fringilla mauris sit amet nibh. Donec
    sodales sagittis magna. Sed
    consequat, leo eget bibendum sodales,
    augue velit cursus nunc,
  </p>
  <p>
    Maecenas nec odio et ante tincidunt
    tempus. Donec vitae sapien ut libero
    venenatis faucibus. Nullam quis ante.
    Etiam sit amet orci eget eros
    faucibus tincidunt. Duis leo. Sed
    fringilla mauris sit amet nibh. Donec
    sodales sagittis magna. Sed
    consequat, leo eget bibendum sodales,
    augue velit cursus nunc,
  </p>
  <p>
    Maecenas nec odio et ante tincidunt
    tempus. Donec vitae sapien ut libero
    venenatis faucibus. Nullam quis ante.
    Etiam sit amet orci eget eros
    faucibus tincidunt. Duis leo. Sed
    fringilla mauris sit amet nibh. Donec
    sodales sagittis magna. Sed
    consequat, leo eget bibendum sodales,
    augue velit cursus nunc,
  </p>
  <p>
    Maecenas nec odio et ante tincidunt
    tempus. Donec vitae sapien ut libero
    venenatis faucibus. Nullam quis ante.
    Etiam sit amet orci eget eros
    faucibus tincidunt. Duis leo. Sed
    fringilla mauris sit amet nibh. Donec
    sodales sagittis magna. Sed
    consequat, leo eget bibendum sodales,
    augue velit cursus nunc,
  </p>
  <p>
    Maecenas nec odio et ante tincidunt
    tempus. Donec vitae sapien ut libero
    venenatis faucibus. Nullam quis ante.
    Etiam sit amet orci eget eros
    faucibus tincidunt. Duis leo. Sed
    fringilla mauris sit amet nibh. Donec
    sodales sagittis magna. Sed
    consequat, leo eget bibendum sodales,
    augue velit cursus nunc,
  </p>
  <p>
    Maecenas nec odio et ante tincidunt
    tempus. Donec vitae sapien ut libero
    venenatis faucibus. Nullam quis ante.
    Etiam sit amet orci eget eros
    faucibus tincidunt. Duis leo. Sed
    fringilla mauris sit amet nibh. Donec
    sodales sagittis magna. Sed
    consequat, leo eget bibendum sodales,
    augue velit cursus nunc,
  </p>
  <p>
    Maecenas nec odio et ante tincidunt
    tempus. Donec vitae sapien ut libero
    venenatis faucibus. Nullam quis ante.
    Etiam sit amet orci eget eros
    faucibus tincidunt. Duis leo. Sed
    fringilla mauris sit amet nibh. Donec
    sodales sagittis magna. Sed
    consequat, leo eget bibendum sodales,
    augue velit cursus nunc,
  </p>
  <p>
    Maecenas nec odio et ante tincidunt
    tempus. Donec vitae sapien ut libero
    venenatis faucibus. Nullam quis ante.
    Etiam sit amet orci eget eros
    faucibus tincidunt. Duis leo. Sed
    fringilla mauris sit amet nibh. Donec
    sodales sagittis magna. Sed
    consequat, leo eget bibendum sodales,
    augue velit cursus nunc,
  </p>
  <p>
    Maecenas nec odio et ante tincidunt
    tempus. Donec vitae sapien ut libero
    venenatis faucibus. Nullam quis ante.
    Etiam sit amet orci eget eros
    faucibus tincidunt. Duis leo. Sed
    fringilla mauris sit amet nibh. Donec
    sodales sagittis magna. Sed
    consequat, leo eget bibendum sodales,
    augue velit cursus nunc,
  </p>
  <p>
    Maecenas nec odio et ante tincidunt
    tempus. Donec vitae sapien ut libero
    venenatis faucibus. Nullam quis ante.
    Etiam sit amet orci eget eros
    faucibus tincidunt. Duis leo. Sed
    fringilla mauris sit amet nibh. Donec
    sodales sagittis magna. Sed
    consequat, leo eget bibendum sodales,
    augue velit cursus nunc,
  </p>
  <p>
    Maecenas nec odio et ante tincidunt
    tempus. Donec vitae sapien ut libero
    venenatis faucibus. Nullam quis ante.
    Etiam sit amet orci eget eros
    faucibus tincidunt. Duis leo. Sed
    fringilla mauris sit amet nibh. Donec
    sodales sagittis magna. Sed
    consequat, leo eget bibendum sodales,
    augue velit cursus nunc,
  </p>
  <p>
    Maecenas nec odio et ante tincidunt
    tempus. Donec vitae sapien ut libero
    venenatis faucibus. Nullam quis ante.
    Etiam sit amet orci eget eros
    faucibus tincidunt. Duis leo. Sed
    fringilla mauris sit amet nibh. Donec
    sodales sagittis magna. Sed
    consequat, leo eget bibendum sodales,
    augue velit cursus nunc,
  </p>
  <p>
    Maecenas nec odio et ante tincidunt
    tempus. Donec vitae sapien ut libero
    venenatis faucibus. Nullam quis ante.
    Etiam sit amet orci eget eros
    faucibus tincidunt. Duis leo. Sed
    fringilla mauris sit amet nibh. Donec
    sodales sagittis magna. Sed
    consequat, leo eget bibendum sodales,
    augue velit cursus nunc,
  </p>
  <p>
    Maecenas nec odio et ante tincidunt
    tempus. Donec vitae sapien ut libero
    venenatis faucibus. Nullam quis ante.
    Etiam sit amet orci eget eros
    faucibus tincidunt. Duis leo. Sed
    fringilla mauris sit amet nibh. Donec
    sodales sagittis magna. Sed
    consequat, leo eget bibendum sodales,
    augue velit cursus nunc,
  </p>
  <p>
    Maecenas nec odio et ante tincidunt
    tempus. Donec vitae sapien ut libero
    venenatis faucibus. Nullam quis ante.
    Etiam sit amet orci eget eros
    faucibus tincidunt. Duis leo. Sed
    fringilla mauris sit amet nibh. Donec
    sodales sagittis magna. Sed
    consequat, leo eget bibendum sodales,
    augue velit cursus nunc,
  </p>
  <p>
    Maecenas nec odio et ante tincidunt
    tempus. Donec vitae sapien ut libero
    venenatis faucibus. Nullam quis ante.
    Etiam sit amet orci eget eros
    faucibus tincidunt. Duis leo. Sed
    fringilla mauris sit amet nibh. Donec
    sodales sagittis magna. Sed
    consequat, leo eget bibendum sodales,
    augue velit cursus nunc,
  </p>
  <p>
    Maecenas nec odio et ante tincidunt
    tempus. Donec vitae sapien ut libero
    venenatis faucibus. Nullam quis ante.
    Etiam sit amet orci eget eros
    faucibus tincidunt. Duis leo. Sed
    fringilla mauris sit amet nibh. Donec
    sodales sagittis magna. Sed
    consequat, leo eget bibendum sodales,
    augue velit cursus nunc,
  </p>
  <p>
    Maecenas nec odio et ante tincidunt
    tempus. Donec vitae sapien ut libero
    venenatis faucibus. Nullam quis ante.
    Etiam sit amet orci eget eros
    faucibus tincidunt. Duis leo. Sed
    fringilla mauris sit amet nibh. Donec
    sodales sagittis magna. Sed
    consequat, leo eget bibendum sodales,
    augue velit cursus nunc,
  </p>
  <p>
    Maecenas nec odio et ante tincidunt
    tempus. Donec vitae sapien ut libero
    venenatis faucibus. Nullam quis ante.
    Etiam sit amet orci eget eros
    faucibus tincidunt. Duis leo. Sed
    fringilla mauris sit amet nibh. Donec
    sodales sagittis magna. Sed
    consequat, leo eget bibendum sodales,
    augue velit cursus nunc,
  </p>
</div>

A:

Ознакомьтесь: https://getbootstrap.com/docs/4.0/components/modal/
Чтобы не вылазило за область видимости нужно поставить max-height(максимальная высота) или для родительского блока height: auto 

