Property scrollbar-width not working in css - html

Question

I'm trying to set the width of the scrollbar to 'thin' and 'none', neither of them are working. I have also tried using -webkit-
NOTE: I'VE SET THE OVERFLOW TO 'AUTO', IS IT THAT THE SCROLLBAR-WIDTH PROPERTY IS NOT WORKING?
The following is my HTML:
<div class="chat__chatting">
<div class="chat__scrollable-chat">
<div class="chat__chatting__header">
<div class="chat__chatting__header--img">
<img src="../../assets/person.png" />
</div>
<div class="chat__chatting__header--descr">
<div class="chat__chatting__header--name">Alexender</div>
<div class="chat__chatting__header--location">Birmingham, United Kingdom</div>
<div class="chat__chatting__header--age">Age 24</div>
</div>
</div>
<div class="chat__chatting__body">
<div class="chat__chatting__body--rcv-msg">
<div class="chat__chatting__body--rcv-msg--img">
<img src="../../assets/person.png" />
</div>
<div class="chat__chatting__body--rcv-msg---text">How are you?</div>
</div>
<div class="chat__chatting__body--sent-msg">
<div class="chat__chatting__body--sent-msg--img">
<img src="../../assets/person.png" />
</div>
<div class="chat__chatting__body--sent-msg---text">I'm fine</div>
</div>
</div>
</div>
<div class="chat__chatting__footer">
<textarea rows="1" class="chat__chatting__footer--textfield"></textarea>
<div class="chat__chatting__footer--send-btn">
<img src="../../assets/send.svg" />
</div>
</div>
</div>
And SCSS:
.chat{
&__scrollable-chat {
overflow-y: auto;
flex-grow: 1;
scrollbar-width: none;
}
&__chatting {
border-radius: 4px;
flex: 3;
height: 100%;
background-color: #fff;
display: flex;
flex-flow: column;
flex-grow: 3;
&__header {
display: flex;
flex-direction: row;
justify-content: center;
padding: 2rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
&--img {
width: 11rem;
height: 11rem;
overflow: hidden;
border-radius: 50%;
overflow: hidden;
margin-right: 1.5rem;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
&--descr {
padding-top: 1rem;
}
&--name {
font-size: 2.2rem;
color: $color-text;
padding-bottom: 0.6rem;
}
&--location,
&--age {
color: rgb(163, 163, 163);
font-size: 1.5rem;
display: block;
}
}
&__footer {
background-color: #f9f9f9;
display: flex;
flex-direction: row;
padding: 1rem 3rem;
position: sticky;
left: 0;
bottom: 0;
align-items: stretch;
&--textfield {
border: 1px solid rgba(0, 0, 0, 0.1);
resize: none;
font-size: 1.7rem;
font-family: "Lato", sans-serif;
padding: 7px 1.4rem;
color: $color-text;
outline: none;
width: 100%;
scrollbar-width: none;
border-radius: 15px;
max-width: 100%;
margin-right: 1.2rem;
}
&--send-btn {
width: 4rem;
height: 4rem;
img {
height: 100%;
width: 100%;
object-fit: fit;
}
}
}
}
}
Can someone please come up with a possible solution.

Answer 1

The scrollbar-width is too new for browser. Ref: Can I use scrollbar-width?
For other solution only for webkit browser (chrome, safari, and newer edge)
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
<textarea>ABCDE<br>ABCDE<br>ABCDE<br>ABCDE<br>ABCDE<br>ABCDE</textarea>

Answer 2

From the URL below, you can see the "scrollbar-width" is quite unpopular among browsers so that might be the reason why it's not working =>
https://caniuse.com/?search=scrollbar-width
You can use WebKit like
You have an element with scroll functionality.
set "::-webkit-scrollbar" on the same scroll element =>
.scroll-element::-webkit-scrollbar {
width: 4px;
height: 100%;
background-color: gray;
}
Keep in mind that this "background-color: gray" is for the scrollbar background and NOT for the actual scroller.
Let's make the actual scroller (the moving part) a different color, now use the "::webkit-scrollbar-thumb" =>
.scroll-element::-webkit-scrollbar-thumb {
background: #000;
}