```html
<body>
    <div class="editor-overlay">
        <div class="editor-menu">
            <p class="menu-title">Edit Story</p>
            <div class="options-set-one">
                <input type="text" value="[New] 테스트 스토리">
                <button class="action-story-protection">
                    <svg-icon></svg-icon>
                </button>
            </div>
            <div class="options-set-two">
                <div class="selectToneMenu">
                    <div class="option" id="option-creative">
                        <span class="label-category">More</span>
                        <span class="label">Creative</span>
                    </div>
                    <div class="option selectedBalanced" id="option-balanced">
                        <span class="label-category">More</span>
                        <span class="label">Balanced</span>
                    </div>
                    <div class="option" id="option-precise">
                        <span class="label-category">More</span>
                        <span class="label">Precise</span>
                    </div>
                </div>
            </div>
            <div class="options-set-three">
                <div class="container">...
</div>
            </div>
            <div class="options-set-four">
                <button class="action-new-page"><span style="font-weight: bold; font-size: 30px;">+</span> New Page</button>
                <button class="action-save-story">
                    <svg-icon></svg-icon>
                    Done
                </button>
            </div>
        </div>
    </div>
    </div>
```

In the container div labeled "..." there is actually multiple items like a list:
```
<div class="editor-page editor-page-left">
   ...
</div>
<div class="editor-page editor-page-right">
   ...
</div>
<div class="editor-page editor-page-left">
   ...
</div>
<!-- and so on -->
```

Here is the whole css file (so it includes stuff not relevant to the problme:
```
:root {
    --cib-color-fill-accent-gradient-creative-quaternary: linear-gradient(90deg, rgb(238, 237, 243) 0%, 0.77381%, rgb(239, 238, 244) 1.54762%, 6.72619%, rgb(239, 236, 243) 11.9048%, 12.381%, rgb(240, 237, 244) 12.8571%, 27.9167%, rgb(242, 236, 244) 42.9762%, 51.9048%, rgb(239, 236, 243) 60.8333%, 61.9643%, rgb(238, 235, 246) 63.0952%, 66.7262%, rgb(235, 234, 249) 70.3571%, 73.2738%, rgb(232, 232, 248) 76.1905%, 77.1429%, rgb(230, 231, 248) 78.0952%, 79.9405%, rgb(228, 229, 249) 81.7857%, 84.1667%, rgb(227, 228, 248) 86.5476%, 87.0238%, rgb(226, 227, 248) 87.5%, 89.3452%, rgb(224, 224, 252) 91.1905%, 95.5952%, rgb(220, 223, 252) 100%);
    --cib-color-fill-accent-gradient-balanced-quaternary: linear-gradient(90deg, rgb(239, 242, 247) 0%, 7.60286%, rgb(237, 240, 249) 15.2057%, 20.7513%, rgb(235, 239, 248) 26.297%, 27.6386%, rgb(235, 239, 248) 28.9803%, 38.2826%, rgb(231, 237, 249) 47.585%, 48.1216%, rgb(230, 236, 250) 48.6583%, 53.1306%, rgb(228, 236, 249) 57.6029%, 61.5385%, rgb(227, 234, 250) 65.4741%, 68.7835%, rgb(222, 234, 250) 72.093%, 75.7603%, rgb(219, 230, 248) 79.4275%, 82.8265%, rgb(216, 229, 248) 86.2254%, 87.8354%, rgb(213, 228, 249) 89.4454%, 91.8605%, rgb(210, 226, 249) 94.2755%, 95.4383%, rgb(209, 225, 248) 96.6011%, 98.3005%, rgb(208, 224, 247) 100%);
    --cib-color-fill-accent-gradient-precise-quaternary: linear-gradient(90deg, rgb(236, 242, 245) 0%, 1.3089%, rgb(234, 243, 245) 2.6178%, 17.4084%, rgb(232, 241, 242) 32.199%, 36.2565%, rgb(229, 241, 242) 40.3141%, 45.0262%, rgb(227, 240, 242) 49.7382%, 51.8325%, rgb(226, 239, 245) 53.9267%, 57.199%, rgb(224, 239, 245) 60.4712%, 62.9581%, rgb(220, 237, 245) 65.445%, 66.2304%, rgb(220, 237, 245) 67.0157%, 68.0628%, rgb(218, 236, 244) 69.1099%, 75.1309%, rgb(214, 233, 240) 81.1518%, 82.5916%, rgb(211, 231, 240) 84.0314%, 84.4241%, rgb(212, 231, 239) 84.8168%, 86.911%, rgb(210, 230, 239) 89.0052%, 94.5026%, rgb(207, 227, 236) 100%);
    --cib-color-fill-accent-gradient-creative-primary: linear-gradient(130deg, #914887 20%, #8B257E 77.5%);
    --cib-color-fill-accent-gradient-balanced-primary: linear-gradient(130deg, #2870EA 20%, #1B4AEF 77.5%);
    --cib-color-fill-accent-gradient-precise-primary: linear-gradient(130deg, #006880 20%, #005366 77.5%);
    --cib-color-fill-accent-gradient-positive-button: linear-gradient(130deg, #03db20 20%, #04be0a 77.5%);
    --cib-color-fill-accent-creative-secondary: #75306C;
    --cib-color-fill-accent-balanced-secondary: #174AE4;
    --cib-color-fill-accent-precise-secondary: #006880;
    --cib-border-radius-none: 0px;
    --cib-border-radius-small: 2px;
    --cib-border-radius-medium: 4px;
    --cib-border-radius-large: 8px;
    --cib-border-radius-extra-large: 12px;
    --cib-border-radius-xx-large: 22px;
    --cib-border-radius-circular: 10000px;
}
html {
    height: 100%;
}
body {
    background: var(--cib-color-fill-accent-gradient-balanced-quaternary);
    font-family: -apple-system, Roboto, SegoeUI, 'Segoe UI', 'Helvetica Neue', Helvetica, 'Microsoft YaHei', 'Meiryo UI', Meiryo, Arial Unicode MS, sans-serif;
    overscroll-behavior: none;
    margin: 0;
    height: 100vh;
}

/* -------------------- menu overlay -------------------- */
.editor-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 1000;
    /* display: none; */
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s forwards;
    padding: 50px; /* currently is not respected if the .menu-container's content makes it grow in height enough, it will keep growing any way */
    box-sizing: border-box;
    opacity: 0;
}
.editor-overlay.visible {
    display: flex;
}
.editor-overlay .editor-menu {
    position: relative;
    width: 700px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-radius: 8px;
    box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.16), 0px 6.4px 14.4px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transform: scale(0.95);
    animation: scaleIn 0.2s 0.1s forwards;
    opacity: 0;
    padding: 15px 10px;
    gap: 15px;
}
.editor-overlay .editor-menu::before { /* this is also the actual background of editor-menu, it uses before to achieve custom gradient + opacity background */
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 700px;
    background: var(--cib-color-fill-accent-gradient-balanced-quaternary);
    opacity: 0.9;
    z-index: -1;
}

.editor-overlay .editor-menu .options-set-one,
.editor-overlay .editor-menu .options-set-two,
.editor-overlay .editor-menu .options-set-three,
.editor-overlay .editor-menu .options-set-four {
    width: 100%;
    min-height: 10px;
    display: flex;
    gap: 5px;
}
.editor-overlay .editor-menu .options-set-one input {
    border: none;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,.14),0 0 2px rgba(0,0,0,.12);
    font-size: 20px;
    padding: 8px;
    width: 100%;
}
.editor-overlay .editor-menu .options-set-one input:focus {
    outline: none;
    border-bottom: 3px solid var(--cib-color-fill-accent-balanced-secondary)
}
.editor-overlay .editor-menu .options-set-one .action-story-protection {
    border: none;
    border-radius: 6px;
    background: var(--cib-color-fill-accent-gradient-balanced-primary);
    height: 38.5px;
    width: 38.5px;
    color: #FFFFFF;
    fill: #FFFFFF;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,.14),0 0 2px rgba(0,0,0,.12);
    flex-shrink: 0;
}
.editor-overlay .editor-menu .options-set-one .action-story-protection:hover {
    color: #cacaca;
    fill: #cacaca;
}
.editor-overlay .editor-menu .options-set-one .action-story-protection:active {
    color: #a1a1a1;
    fill: #a1a1a1;
    height: 37.5px;
    width: 37.5px;
    margin: 0.5px;
}

.editor-overlay .editor-menu .options-set-two {
    justify-content: center;
}
.selectToneMenu {
    background: #f7f8fd;
    height: 42px;
    width: 300px;
    padding: 3px 1.5px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
}
.selectToneMenu .option {
    background: #fafcfe;
    height: 100%;
    width: 100px;
    margin: 0 1.5px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.1s ease;
}
.selectToneMenu .option .label-category {
    display: block;
    margin-bottom: -2px;
    font-size: 10px;
    line-height: 14px;
    font-weight: 500;
    font-variation-settings: unset;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.selectToneMenu .option .label {
    display: block;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    font-variation-settings: unset;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.selectToneMenu .option:hover {
    background: #eceef0;
}
.selectToneMenu .option:active {
    background: #e2e4e7;
}
.selectToneMenu .selectedBalanced,
.selectToneMenu .selectedCreative,
.selectToneMenu .selectedPrecise {
    color: #f9fafe !important;
}
.selectToneMenu .selectedBalanced .label,
.selectToneMenu .selectedCreative .label,
.selectToneMenu .selectedPrecise .label {
    font-weight: 400;
}
.selectToneMenu .selectedBalanced {
    background: var(--cib-color-fill-accent-gradient-balanced-primary) !important;
}
.selectToneMenu .selectedCreative {
    background: var(--cib-color-fill-accent-gradient-creative-primary) !important;
}
.selectToneMenu .selectedPrecise {
    background: var(--cib-color-fill-accent-gradient-precise-primary) !important;
}
.selectToneMenu .selectedBalanced:hover,
.selectToneMenu .selectedBalanced:active {
    background: var(--cib-color-fill-accent-gradient-balanced-primary);
    cursor: default;
}
.selectToneMenu .selectedCreative:hover,
.selectToneMenu .selectedCreative:active {
    background: var(--cib-color-fill-accent-gradient-creative-primary);
    cursor: default;
}
.selectToneMenu .selectedPrecise:hover,
.selectToneMenu .selectedPrecise:active {
    background: var(--cib-color-fill-accent-gradient-precise-primary);
    cursor: default;
}

.editor-overlay .editor-menu .options-set-three {
    gap: 0;
    max-height: 100%;
}
.editor-overlay .editor-menu .options-set-three .container {
    width: 100%;
    min-height: 10px;
    max-height: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,.14),0 0 2px rgba(0,0,0,.12);
}
.editor-page {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.editor-page-left {
    background: rgba(255,255,255,1);
    padding-bottom: 15px;
}
.editor-page-right {
    background: rgb(213, 213, 213);
    padding-top: 15px;
}
.editor-page .page-values-one {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.editor-page .page-values-one .text-font {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.editor-page .page-values-one .text-font .text-options {
    display: flex;
}
.editor-page .page-values-one .text-font .text-value,
.editor-page .page-values-one .text-font .font-value,
.editor-page .page-values-one .text-font .text-display-options input,
.editor-page .page-values-two .audio-upload-container input,
.editor-page .page-values-two .image-upload-container input {
    border: none;
    border-radius: 6px;
    /* box-shadow: 0 2px 4px rgba(0,0,0,.14),0 0 2px rgba(0,0,0,.12); */
    box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.16), 0px 1.4px 14.4px rgba(0, 0, 0, 0.2);
    font-size: 18px;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
}
.editor-page .page-values-one .text-font .text-value:focus,
.editor-page .page-values-one .text-font .font-value:focus,
.editor-page .page-values-one .text-font .text-display-options input:focus,
.editor-page .page-values-two .audio-upload-container input:focus,
.editor-page .page-values-two .image-upload-container input:focus {
    outline: none;
    border-bottom: 3px solid var(--cib-color-fill-accent-balanced-secondary)
}
.editor-page .page-values-one .text-font .text-value {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.editor-page .page-values-one .image-viewer {
    background: var(--cib-color-fill-accent-gradient-balanced-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    width: 126px;
    height: 126px;
    flex-shrink: 0;
    border-radius: 10px;
    box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.16), 0px 6.4px 14.4px rgba(0, 0, 0, 0.2);
}
.editor-page .page-values-one .image-viewer img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.16), 0px 6.4px 14.4px rgba(0, 0, 0, 0.2);
}
.editor-page .page-values-one .text-font .text-display-options {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}

.editor-page .page-values-two {
    display: flex;
    width: 100%;
    gap: 10px;
}
.editor-page .page-values-two .audio-upload-container,
.editor-page .page-values-two .image-upload-container {
    width: 100%;
    display: flex;
}
.editor-page .page-values-two .audio-upload-container input,
.editor-page .page-values-two .image-upload-container input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.editor-page .page-values-two .audio-upload-container .action-upload-audio,
.editor-page .page-values-two .image-upload-container .action-upload-image,
.editor-page .page-values-one .text-font .text-options .action-change-position {
    border: none;
    border-radius: 6px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: white;
    height: 38.5px;
    width: 38.5px;
    color: black;
    fill: black;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,.14),0 0 2px rgba(0,0,0,.12);
    flex-shrink: 0;
}
.editor-page .page-values-two .audio-upload-container .action-upload-audio .icon,
.editor-page .page-values-two .image-upload-container .action-upload-image .icon,
.editor-page .page-values-one .text-font .text-options .action-change-position .icon {
    width: 100%;
    height: 100%
}
.editor-page .page-values-two .audio-upload-container .action-upload-audio:hover,
.editor-page .page-values-two .image-upload-container .action-upload-image:hover,
.editor-page .page-values-one .text-font .text-options .action-change-position:hover {
    background: var(--cib-color-fill-accent-gradient-balanced-primary);
    color: #FFFFFF;
    fill: #FFFFFF;
}
.editor-page .page-values-two .audio-upload-container .action-upload-audio:active,
.editor-page .page-values-two .image-upload-container .action-upload-image:active,
.editor-page .page-values-one .text-font .text-options .action-change-position:active {
    background: var(--cib-color-fill-accent-gradient-balanced-primary);
    color: #a1a1a1;
    fill: #a1a1a1;
    height: 37.5px;
    width: 37.5px;
    margin: 0.5px;
}

.editor-overlay .editor-menu .options-set-four {
    justify-content: space-around;
}
.editor-overlay .editor-menu .options-set-four button {
    border: none;
    border-radius: 6px;
    background: var(--cib-color-fill-accent-gradient-balanced-primary);
    height: 38px;
    width: 200px;
    color: #FFFFFF;
    fill: #FFFFFF;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,.14),0 0 2px rgba(0,0,0,.12);
    flex-shrink: 0;
    font-size: 18px;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.editor-overlay .editor-menu .options-set-four .action-save-story {
    background: var(--cib-color-fill-accent-gradient-positive-button);
}
.editor-overlay .editor-menu .options-set-four .action-save-story .icon {
    width: 20px;
    margin-top: 3px;
}
.editor-overlay .editor-menu .options-set-four button:hover {
    color: #cacaca;
    fill: #cacaca;
}
.editor-overlay .editor-menu .options-set-four button:active {
    color: #a1a1a1;
    fill: #a1a1a1;
    height: 37px;
    width: 199px;
    margin: 0.5px;
}


/* -------------------- menu overlay -------------------- */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s forwards;
    padding: 50px;
    box-sizing: border-box;
    opacity: 0;
}
.overlay.visible {
    display: flex;
}
.overlay .overlay-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    max-width: 600px;
    min-height: 50px;
    transform: scale(0.95);
    opacity: 0;
    animation: scaleIn 0.2s 0.1s forwards;
    gap: 10px;
    background: transparent;
    max-height: 100%;
    padding: 15px 10px;
}
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.overlay .menu-title,
.editor-overlay .menu-title {
    font-size: 30px;
    font-weight: bold;
    margin: 0;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
    background: white;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid rgb(210, 210, 210);
    box-shadow: 0 2px 4px rgba(0,0,0,.14),0 0 2px rgba(0,0,0,.12);
}

/*                        Scroll bar                        */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-thumb {
	background-color: #a0a1a79e;
	border-radius: 6px;
}
::-webkit-scrollbar-track {
	background-color: transparent;
}
```

Now, one of the items looks like this:
```
<div class="editor-page editor-page-left">
                        <div class="page-values-one">
                            <div class="text-font">
                                <div class="text-options">
                                    <input type="text" class="text-value" placeholder="테스트">
                                    <button class="action-change-position">
                                        <svg-icon></svg-icon>
                                    </button>
                                </div>
                                <input type="text" class="font-value" placeholder="-apple-system, Roboto, SegoeUI, 'Segoe UI';">
                                <div class="text-display-options">
                                    <input type="text" class="text-color" placeholder="#000000">
                                    <input type="text" class="text-size" placeholder="28px">
                                    <input type="text" class="text-rotation" placeholder="0deg">
                                </div>
                            </div>
                            <div class="image-viewer">
                                <img src="data/673320c6-ea7a-4d86-a78f-4e23e1f20767/illustrations/apple.jpg">
                            </div>
                        </div>
                        <div class="page-values-two">
                            <div class="audio-upload-container">
                                <input type="text" class="audio-file-name" placeholder="apple.mp3">
                                <button class="action-upload-audio">
                                    <svg-icon></svg-icon>
                                </button>
                            </div>
                            <div class="image-upload-container">
                                <input type="text" class="image-file-name" placeholder="apple.png">
                                <button class="action-upload-image">
                                    <svg-icon></svg-icon>
                                </button>
                            </div>
                        </div>
                    </div>
```
The right version is just an exact copy.

The problem is simple, and the css fix is also simple. You must find a solution for the following task: Currently the whole menu has fixed height, this is intended. However when there's enough amount of pages (this amount will be dynamic later on), then the height of the whole menu will grow so much to fit all the page divs in the container div, so that it exceeds the height of the window. A temporary solution was simply:
```
.editor-overlay .editor-menu .options-set-three {
    gap: 0;
    max-height: 400px; <--- Updated to fixed height.
}
```
However, this is a bad solution because it was based on the developer's window height. Someone with a much larger screen resolution would see their menu only showing 2 pages at max, even though the menu has much more space to grow in. 

Provide the permanent solution. Make sure that the menu cannot grow all the way to touch the edges of the top and bottom of the window either. Keep a 20px distance before stopping the grow, forcing the options-set-three.container to then be scrollable (overflow: auto);