HTML and CSS: a row inside a div won't let me place items all next to each other and won't scroll

This code isn't mine, it's a free to use one I found on toyhouse, and I wanted to make some edits to fit my preferences. This is what I have:

At the bottom there's a horizontal scroll bar (it's grey, barely visible tho) but it won't work because the other 3 circle buttons I want to display are at the bottom (not visible, because I set the overflow-y to hidden). Here's a better view of what's happening when I have overflow-x and y set to auto:

I'm struggling with putting all 7 circles next to each other on the same row, to no success ;; Being the code not fully mine, I'm not sure what I should and shouldn't edit in order to avoid the whole code breaking. I'm super sorry if it's messy or impractical, html isn't really my field of coding.

Here's the code I have right now! (Note that the container is in a fixed position inside a bigger bootstrap grid)

<!-- container -->
    <div class="col-md-6 col-sm-12 pl-md-2 mt-md-n5" style="position: relative">
        <div class="col-12 p-0 overflow-auto" style="color: #571034; background-color: fff0f4; border: solid 1px #db4b73; font-family: courier new; font-size: 15px;  z-index: 1; max-height: 257px; min-height: 257px; border-radius: 10px; ">
            
            <div class="p-1" style="border-bottom: solid 1px #db4b73;">
              <div class="row no-gutters align-items-center justify-content-center">
                <div class="card bg-transparent p-1 m-1 rounded-0 align-items-center justify-content-center" style="height: 30px; width: 100px; font-size: 14px; color:#db4b73; border-color: #ff4d89; border-radius: 5px; margin-left: 10px">
                                <a><!-- commissions button code --></a>
                                <span>Commissions</span>
                </div>
              </div>
            </div>
            
            <!-- friends -->
            <div class="col-12" style="border-top: solid 1px #db4b73; position: absolute; bottom: 0;">
              
              <div class="row pt-1 pb-2 no-gutters" style="min-height: 60px; max-height: 60px; overflow-x: auto; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #db4b73;">
                  
                      <!--===friends links ===-->
                      <a><img src=""></a> <!-- circle button code, a href with a styled img inside, there's 7of these -->
              </div>
              
           </div>
            
       </div>
   </div>

Try setting overflow-y to hidden again and adding "flex-wrap: nowrap;" to the styles.

Here's the div with changes made so you can copy+paste:

<div class="row pt-1 pb-2 no-gutters" style="min-height: 60px; max-height: 60px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: thin; scrollbar-color: #db4b73;">