请问怎么让这几个div能够横向滚动

我试过给他们添加overflow了，但是加上之后就变形，没法实现滚动
加之前的：

是不是用了flex布局

overflow-x:scroll;

<div style="width: 100%;margin-top: 10px;margin-bottom: 30px;
                            white-space: nowrap;overflow-x: auto;-webkit-overflow-scrolling:touch;">
                            
                            <span @click="clickcolumnClass($event)" class="columnClass active" >招商引资</span>
                            <span @click="clickcolumnClass($event)" class="columnClass">优惠政策</span>
                            <span @click="clickcolumnClass($event)" class="columnClass">优质资源</span>
                            <span @click="clickcolumnClass($event)" class="columnClass">对外宣传</span>
                            <span @click="clickcolumnClass($event)" class="columnClass">工作动态</span>
                            <span @click="clickcolumnClass($event)" class="columnClass">大会新闻</span>
                            <span @click="clickcolumnClass($event)" class="columnClass">重大活动</span>

                        </div>

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632