Property scrollbar-width not working in css

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.

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>