Полоса прокрутки не может полностью go вверх по верхнему div контейнера

Question

моя полоса прокрутки не может go к верхнему элементу контейнера. Все нижние элементы кроме верхнего элемента в порядке. Когда я добавляю больше элементов, полоса прокрутки может go внизу, но не может go вверху. Это мой html код

<div class="new-article-container container animated slideInUp">
<div class="point-deep-shadow" style="top: 10px; left: 10px"></div>
<div class="point-deep-shadow" style="top: 10px; right: 10px"></div>
<div class="point-deep-shadow" style="bottom: 10px; left: 10px"></div>
<div class="point-deep-shadow" style="bottom: 10px; right: 10px"></div>
<div class="container-title text-center mt-3">New Article</div>

<form id="article-form" class="w-100">

    <div class="form-group w-75">
        <div class="input-field w-100">
            <input type="text" name="article_name" class="txt-input" placeholder="Article Name" tabindex="1">
        </div>
    </div>
    <div class="form-group w-75">
        <div class="custom-select-field">
            <div class="select-selected" tabindex="2">
                <p></p>
            </div>
            <div class="select-items">

            </div>
            <select name="article_type" id="article-type-select">
                <option value="0">Diary</option>
                <option value="1">Note</option>
            </select>
        </div>
    </div>
    <div class="form-group w-75">
        <div class="custom-select-field">
            <div class="select-selected" tabindex="2">
                <p></p>
            </div>
            <div class="select-items">

            </div>
            <select name="article_language" id="article-language-select">
                <option value="0">Vietnamese</option>
                <option value="1">English</option>
            </select>
        </div>
    </div>
    <div class="form-group w-75">
        <div class="custom-textarea-field">
            <div class="text-area__inner">
                <textarea name="article_content" id="article_content"></textarea>
            </div>
        </div>
    </div>
</form>

Таким образом, первая группа форм в форме не видна с полосы прокрутки (поскольку полоса прокрутки не может go там).

Это мой css код:

#article-form{
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 overflow-y: auto;
 height: 80%;
 scrollbar-color: #3E4251 #e8ebed;
 scrollbar-width: thin;
}

::-webkit-scrollbar {
 width: 6px;
}

::-webkit-scrollbar-track {
 background-color: #e8ebed;
 border-radius: 3px;
}

::-webkit-scrollbar-thumb {
 background-color: #3E4251;
 border-radius: 3px;
}

#article-form .input-field{
 display: flex;
 justify-content: center;
 align-items: center;
 height: 70px;
 border: 2px solid white;
 border-radius: 15px;
 background: #F5F7F9;
 transition: all .4s;
 box-shadow:  5px 5px 10px #d0d2d4, 
         -5px -5px 10px #ffffff;
}

#article-form .input-field:hover{
 box-shadow:  21px 21px 42px #b7c3cf, 
         -21px -21px 42px #f7ffff;
}

#article-form .input-field .txt-input{
 height: 100%;
 width: 90%;
 border: 0;
 background-color: transparent;
 font-family: Nunito-Regular;
 font-size: 20px;
 color: #3E4251;
}

#article-form .input-field:focus-within{
 background: #F5F7F9;
 box-shadow: inset 5px 5px 10px #d0d2d4, 
        inset -5px -5px 10px #ffffff;
}

#article-form .custom-select-field{
 position: relative;
 font-family: Nunito-Bold;
 letter-spacing: 1px;
 font-size: 1.2em;
 height: 70px;
 border: 2px solid white;
 border-radius: 15px;
 background: #F5F7F9;
 transition: all .4s;
 box-shadow:  5px 5px 10px #d0d2d4, 
         -5px -5px 10px #ffffff;
 }

 #article-form .custom-select-field select{
  display: none;
 }

#article-form .custom-select-field .select-selected{
 height: 70px;
 color: #49ADE6;
 cursor: pointer;
 border-radius: 15px;
}

#article-form .custom-select-field .select-selected:after{
 font-family: "Font Awesome 5 Free"; 
 font-weight: 900;
 content: "\f107";
 font-size: 1.5em;
 position: absolute;
 top: 12px;
 right: 26px;
}

#article-form .custom-select-field:hover{
 box-shadow:  21px 21px 42px #b7c3cf, 
         -21px -21px 42px #f7ffff;
}

#article-form .custom-select-field .select-selected:focus{
 outline: 0;
 box-shadow: inset 12px 12px 12px #b7c3cf, 
        inset -12px -12px 12px #f7ffff;
}

#article-form .custom-select-field .select-selected.select-arrow-active:after{
 content: "\f106";
}

#article-form .custom-select-field .select-selected p{
 position: absolute;
 top: 20px;
 left: 30px;
}

#article-form .custom-select-field .select-items{
 position: absolute;
 top: 120%;
 left: 0;
 right: 0;
 z-index: 99;
 border: 2px solid white;
 border-radius: 20px;
 background: #F5F7F9;
 box-shadow:  12px 12px 24px #d0d2d4, 
         -12px -12px 24px #ffffff;
}

#article-form .custom-select-field .select-items div:first-child{
 margin-top: 10px;
}

#article-form .custom-select-field .select-items div:last-child{
 margin-bottom: 10px;
}

#article-form .custom-select-field .select-items div{
 background-color: #F5F7F9;
 border-radius: 5px;
 padding: 10px;
 color: #3E4251;
 cursor: pointer;
}

#article-form .custom-select-field .select-items.hide{
 display: none;
}

#article-form .custom-select-field .select-items div:hover:not(.same-as-selected){
 background-color: #e8f1fa;
 color: #49ADE6; 
}

#article-form .custom-select-field .select-items .same-as-selected{
 background-color: #D7E5F3;
 color: #49ADE6;
}

#article-form .custom-textarea-field{
 min-height: 350px;
 border: 2px solid white;
 border-radius: 15px;
 background: #F5F7F9;
 box-shadow:  5px 5px 10px #d0d2d4, 
         -5px -5px 10px #ffffff;
}

#article-form .custom-textarea-field .text-area__inner{
 margin: 10px;
 height: 100%;
}

Это изображение, так что вы можете визуально увидеть, что происходит

Как видите, полоса прокрутки не может go выше верхней красной линии. Он просто остался там.

То, что я пробовал

Я слышал, что размер ящика может помочь, поэтому я добавил размер ящика: border-box; к форме. Однако это не сработало.

Я видел, что если я изменю высоту текстовой области (я использую текстовый редактор TinyMCE), полоса прокрутки изменится, чтобы приспособиться, но все равно не сможет go к вершине.