scroll div content with hidden scrollbar

Question

I'm trying to create a div with some content that should scroll in the x direction like the image but I want its scrollbar to be hidden here is my code I also try commented ways in the code below but didn't work.

<style>
 main{
   width:500px
 }
 .company{
   /* overflow-x: scroll; */
   width:800px;
   overflow-x: auto;
   display: flex;
   gap: 12px;
   font-weight: 600;
   font-size: 16px;
 }
 /*.scrollable-company::-webkit-scrollbar{
   display: none;
 } */

</style>
<main>
<section class="company">
  <button class="btn-company active">All</button>
  <button class="btn-company ">Nike</button>
  <button class="btn-company ">Adidas</button>
  <button class="btn-company ">Asics</button>
  <button class="btn-company ">Reebok</button>
  <button class="btn-company ">New Ba..</button>
  <button class="btn-company ">Converse</button>
</section>
</main> 

Answer 1

You need to add the following code:

  .company {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
  }
  .company::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
  }

That's also the answer to the same question here: Hide scroll bar, but while still being able to scroll

 main{
   width:300px;
 }
 .company{
   /* overflow-x: scroll; */
   width:300px;
   overflow-x: auto;
   display: flex;
   gap: 12px;
   font-weight: 600;
   font-size: 16px;
 }
 
  .company {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
  }
  .company::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
  }

<main>
<section class="company">
  <button class="btn-company active">All</button>
  <button class="btn-company ">Nike</button>
  <button class="btn-company ">Adidas</button>
  <button class="btn-company ">Asics</button>
  <button class="btn-company ">Reebok</button>
  <button class="btn-company ">New Ba..</button>
  <button class="btn-company ">Converse</button>
</section>
</main>