flex布局下子div按钮无法行内显示，如何让全部按钮横向展示

我有如下视频组件：

对应的HTML代码如下：

<div class="bottom d-flex">
    <div class="video-controls time-segment p-2">
        <button class="btn-control btn-"><span class="fa fa-undo"></span></button>

        <button class="btn-control btn-step-backward"><span
                class="fa fa-step-backward"></span></button>

        <button *ngIf="!widget.moviePlaying" class="btn-control btn-play" (click)="playPauseMovie(widget)"><span class="fa fa-play"></span></button>

        <button *ngIf="widget.moviePlaying" class="btn-control btn-pause" (click)="playPauseMovie(widget)"><span class="fa fa-pause"></span></button>

        <button class="btn-control btn-step-forward"><span
                class="fa fa-step-forward"></span></button>

        <button class="btn-control btn-reset" hidden><span class="fa fa-undo"></span></button>
    </div>

    <div id="frames-indicator">
        <span id="seekBarLabel">Frame {{ moviesFrames.current }}/{{ moviesFrames.total }}</span>
    </div>

    <div class="widget-controls ml-auto">
        <button class="btn-control btn-play" (click)="setSize(widget, 1, $event, gridster1)"><span
                class="fa fa-clone"></span></button>

        <button *ngIf="!widget.linked" class="btn-control btn-" (click)="toggleLinked(widget)"><span
                class="fa fa-chain-broken"></span></button>

        <button *ngIf="widget.linked" class="btn-control btn-step-backward" (click)="toggleLinked(widget)"><span class="fa fa-link"></span></button>

        <button class="btn-control btn-play" (click)="setSize(widget, -1, $event, gridster1)"><span
                class="fa fa-minus"></span></button>
        <button class="btn-control btn-play" (click)="setSize(widget, 1, $event, gridster1)"><span
                class="fa fa-plus"></span></button>
    </div>
</div>

当前结构说明：

• 外层div容器类名为bottom d-flex
• 第一个子div类名为video-controls time-segment p-2，内部承载控制按钮
• 第二个子div仅包含一个span元素
• 第三个子div右对齐，内部承载功能按钮

需求为让第一个和第三个子div自动拓展宽度，将内部所有按钮全部行内展示，尝试设置width: max-content没有生效，求可行实现方法。

解决方案 #

无需修改CSS即可解决该问题：问题根源是media breakpoint配置错误，之前在中等和大尺寸屏幕下设置了每行渲染相同数量的视频组件，导致中等屏幕下视频容器宽度过窄，造成图标纵向堆叠，调整对应断点下的每行视频组件渲染数量即可。

内容的提问来源于stack exchange，提问作者Dino