scroll-x中的内容一直是排成一列，怎么能让他排成一排？

<template>  
    <scroll-view class="game-list-type-scroll" scroll-x>  
        <view class="game-list-type-button">角色扮演</view>  
        <view class="game-list-type-button">角色扮演</view>  
    </scroll-view>  
</template>  

<script>  
    export default {}  
</script>  

<style>  

    .game-list-type-scroll {  
        background-color: #F8F8F8;  
        width: 100%;  
        height: 50upx;  
    }  

    .game-list-type-button {  
        height: 30upx;  
        width: 150upx;  
        border-radius: 15upx;  
        border: 1upx solid #909399;  
        color: #909399;  
        margin-left: 20upx;  
    }  

    page {  
        display: flex;  
        flex-direction: column;  
        min-height: 100%;  
        background: #DCDFE6;  
    }  

    view {  
        display: flex;  
        background: #F8F8F8;  
        width: 100%;  
        font-size: 26upx;  
    }  
</style>

scroll-x中的内容一直是排成一列，怎么能让他排成一排？