Propozycja, możesz zrobić w modal-u osobno <div> jako "title" i osobno jako pole ze "scroll-em" (html i css przykładowy).
<div class="modal">
<div class="title-box">
<span class="title">Tytuł lorem</span>
<span class="button-close">×</span>
</div>
<div class="desc-box">
<details open>
<summary>Renderer</summary>
<div class="wrap">
<p>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym.</p>
</div>
</details>
<details>
<summary>Game</summary>
<div class="wrap">
<p>Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker.</p>
</div>
</details>
<details>
<summary>Cells</summary>
<div class="wrap">
<p>Lorem Cells</p>
</div>
</details>
<details open>
<summary>HUD</summary>
<div class="wrap">
<ol>
<li>Duis laoreet dictum quam</li>
<li>Duis laoreet dictum quam</li>
<li>Duis laoreet dictum quam</li>
</ol>
</div>
</details>
</div>
</div>
* {
box-sizing: border-box;
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: rgba(20,20,20,1);
width: 340px;
height: 462px;
min-height: 462px;
overflow: hidden;
}
.modal .title-box {
display: flex;
justify-content: space-between;
background-color: rgba(40,40,40,0.7);
width: 100%;
height: 2em;
min-height: 2em;
}
.modal .title-box .title {
font: 1.1em monospace;
color: white;
padding: 0.6em;
}
.modal .title-box .button-close {
font: 1.6em monospace;
color: white;
padding: 0.2em 0.6em;
cursor: pointer;
}
.modal .desc-box {
width: 100%;
height: 100%;
color: white;
text-align: center;
overflow-y: auto;
padding-bottom: 2em;
}
.modal .desc-box details {
font: 1.1em/1.4em monospace;
margin: 1em;
padding: 0;
color: black;
}
.modal .desc-box details summary {
padding: 0.2em;
background-color: #d0d0d0;
border-radius: 1em;
box-shadow: 2px 2px 4px gray;
cursor: pointer;
border: none;
list-style: none;
outline: none;
}
.modal .desc-box details[open] summary {
background-color: #c0c0f0;
}
.modal .desc-box details div.wrap {
border-radius: 1em;
background-color: rgba(40,40,40,0.7);
padding: 0.2em;
color: gray;
margin: 0.5em 0;
box-shadow: 2px 2px 4px gray;
}
.modal .desc-box details > div.wrap li {
text-align: left;
}
.modal .desc-box::-webkit-scrollbar {
width: 10px;
}
.modal .desc-box::-webkit-scrollbar-track {
background-color: rgba(40,40,40,0.7);
}
.modal .desc-box::-webkit-scrollbar-thumb {
background: rgba(50,50,50,0.9);
}
.modal .desc-box::-webkit-scrollbar-thumb:hover {
background: #555;
}