Как задать фиксированную высоту для скроллера без увеличения содержимого страницы?

Question

Здесь я пытаюсь задать фиксированную высоту для скроллера, которая не зависит от высоты содержимого страницы. Я добавил свои коды ниже.

section#data-container{
    height:400px;
    width:200px;
    overflow-y: scroll;
    border:1px solid #000;
    
}
::-webkit-scrollbar {
    width: 10px;
    /*height: 30px;*/
}

::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

<section id="data-container">
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g

ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
</section>

и который появляется так же, как шоу на изображении ниже

Я хотел бы уменьшить ширину и установить ее как фиксированную. Кто-нибудь может мне помочь?

Answer 1

Попробуйте дать min-height в data-container.

section#data-container{
    min-height:400px;
    width:200px;
    overflow-y: scroll;
    border:1px solid #000;

}

код на фрагменте

section#data-container{
    min-height:400px;
    width:200px;
    overflow-y: scroll;
    border:1px solid #000;
    
}
::-webkit-scrollbar {
    width: 10px;
    /*height: 30px;*/
}

::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

<section id="data-container">
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g

ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
adsgdhhhhhhjkhjdhjkfkl fdjhkl;jkh hjhjfdhklh 
ghdfjkgjkfkfh hkdjhfklh khfklhgdlfk flk;jl;g
jhgfdhjl;jljl jkfjkl;gj ljl;kjl;j ljlkjfuirui
</section>