Javascript 在HTML部分添加水平滚动条

我正在学习vue js，希望在其中有两个部分的地方显示一个灵活的显示器。第一部分从屏幕上去掉3个网格，是固定的，不能滚动，分为4个垂直部分。 第二部分将其余9个网格垂直分为4个部分，每个部分都可以用动态按钮填充。当显示的按钮超过区段宽度时，将出现一个影响区段2的滚动条

想象一下我想要构建什么：

我所做的是这样的：

.listDevice{
背景色：达克朗格；
高度：140像素；
溢出：隐藏；
溢出-x：滚动；
}
.数据{
溢出-x：滚动；
显示器：flex；
}

xxxxxx
xxxxxx
xxxxxx
xxxxxx
AA
AA
AA
AA
AA
AA

.listDevice{
背景色：达克朗格；
高度：140像素；
溢出：隐藏；
溢出-x：自动；
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
宽度：160像素
}
.listDevice按钮{
高度：30px；
宽度：40px；
}
.数据{
溢出-x：滚动；
显示器：flex；
}

xxxxxx
xxxxxx
xxxxxx
xxxxxx
AA
AA
AA
AA
AA
AA
AA
AA
AA
AA
AA
AA
AA
AA
AA
AA
AA
AA

.listDevice{
背景色：达克朗格；
高度：140像素；
溢出：隐藏；
溢出-x：自动；
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
宽度：160像素
}
.listDevice按钮{
高度：30px；
宽度：40px；
}
.数据{
溢出-x：滚动；
显示器：flex；
}

xxxxxx
xxxxxx
xxxxxx
xxxxxx
AA
AA
AA
AA
AA
AA
AA
AA
AA
AA
AA
AA
AA
AA
AA
AA
AA
AA

删除溢出：隐藏在CSS中。

删除溢出：隐藏在CSS中