HTML 和 CSS：div 内的一行不允许我将项目全部并排放置，也无法滚动

此代码不是我的，它是我在 Toyhouse 上找到的免费代码，我想进行一些编辑以符合我的偏好。这是我所拥有的：

底部有一个水平滚动条（它是灰色的，几乎看不见），但它不起作用，因为我想要显示的其他 3 个圆形按钮位于底部（不可见，因为我将 overflow-y 设置为隐藏）。以下是将 overflow-x 和 y 设置为自动时发生的情况的更好视图：

我一直在努力将 7 个圆圈放在同一行，但没有成功；由于代码不是我完全拥有的，我不确定我应该和不应该编辑什么以避免整个代码被破坏。如果它很混乱或不切实际，我非常抱歉，html 不是我的编码领域。

这是我现在拥有的代码！（请注意，容器位于更大的引导网格内的固定位置）

<!-- 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>