flex布局，超出部分出现滚动条

效果图如下:

html代码：

<div class="chart">
                        <div class="monitoring-main">
                            <div class="monitoring-list">
                                <div class="item">
                                    <video src="https://app-runhua.oss-cn-zhangjiakou.aliyuncs.com/video/2020/04/08/158632654982028.mp4" muted="muted" controls="true"></video>
                                </div>
                                <div class="item">
                                    <video src="https://app-runhua.oss-cn-zhangjiakou.aliyuncs.com/video/2020/04/08/158632654982028.mp4" muted="muted" controls="true"></video>
                                </div>
                                <div class="item">
                                    <video src="https://app-runhua.oss-cn-zhangjiakou.aliyuncs.com/video/2020/04/08/158632654982028.mp4" muted="muted" controls="true" width="100%" height="100%"></video>
                                </div>
                                <div class="item">
                                    <video src="https://app-runhua.oss-cn-zhangjiakou.aliyuncs.com/video/2020/04/08/158632654982028.mp4" muted="muted" controls="true" width="100%" height="100%"></video>
                                </div>
                            </div>
                        </div>
                    </div>

css样式：

.chart {
    width: 100%;
    height: 1.25rem;
    overflow: hidden;
}

 .monitoring-main {
    height: 1.25rem;
}

.monitoring-list {
    height: 1.25rem;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    display: flex;
}

.monitoring-list .item {
    float: left;
    margin-right: .25rem;
}

.monitoring-list .item video {
    width: 1.82rem;
    height: 1.2rem;
}

.monitoring-list .item:last-child {
    margin-right: 0;
}
/* 
 滚动条样式设置  */
.monitoring-list::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.7);
}

.monitoring-list::-webkit-scrollbar {
    height: 10px;
    background-color: rgba(0, 0, 0, .8);
}

.monitoring-list::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 2px rgba(81, 167, 255, .3);
    background-color: rgba(81, 167, 255, .8);
}