Side scrolling doing vertical scrolling

Question

How can I make vertical scrolling to a horizontal layout?

When I scroll vertically with the cursor on the bar, the whole page scrolls, but when I press shift and scroll wheel it just scrolls the bar, I want the bar to scroll normally when I scroll vertically in a horizontal layout.

I want normal scroll to respond sideways.

<style>
    .suggestion-bar{
  height: 53px;
  background-color: rgb(255, 255, 255);
  position: fixed;
  left:72px;
  top:55px;
  border-bottom:1px solid #ebebeb;;
  display: flex;
  align-items: center;
  width: calc(100% - 60px);
  overflow-x: auto;
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  transform: translateX(0px);
  
}

.suggestion-bar::-webkit-scrollbar{
  display: none;
}



.suggestion-bar button{
  padding:5px 10px 5px 10px;
  border-radius:20px;
  border:1px solid #adadad5f;
  font-size: 14px;
  font-family: 'Robot', arial;
  margin-left:10px;
  flex: 0 0 auto;
  
}

.all-button{
  background-color: black;
  color:white;
}



</style>

<div class="suggestion-bar">

    <button class="all-button .active">All</button>
    <button class="button">Javascript</button>
    <button class="button">Extreme sports</button>
    <button class="button">Movies</button>
    <button class="button">Technology</button>
    <button class="button">Music</button>
    <button class="button">Linux</button>
    <button class="button">Marvel</button>
    <button class="button">Ocean</button>
    <button class="button">Anime</button>
    <button class="button">Computer Science</button>
    <button class="button">Programming</button>
    <button class="button">Career Path</button>
    <button class="button">Will Smith</button>
    <button class="button">Music</button>
    <button class="button">Linux</button>
    <button class="button">Career Path</button>
    <button class="button">Will Smith</button>
    <button class="button">Music</button>
    <button class="button">Linux</button>

</div>