uniapp scroll-view 为什么会给挤压宽度？

Question

<template>
    <view class="content">
        <div class="title">课程筛选</div>
        <div class="slider_box">
            <!-- <text class="section_title">部位</text> -->
            <scroll-view :scroll-x="true" class="scroll_view" :show-scrollbar="false">
                <view class="scroll_content">
                    <div class="scroll_view_item" v-for="(item, index) in bodyArr">
                        <text >{{ item.value }}</text>
                    </div>
                </view>
            </scroll-view>
        </div>
    </view>
</template>

<script setup>
    import {
        ref
    } from 'vue'

    let selectIndex1 = ref(0)
    let bodyArr = ref([{
            value: '全身'
        },
        {
            value: '臀部'
        },
        {
            value: '手臂'
        },
        {
            value: '腰部'
        },
        {
            value: '胸部'
        },
        {
            value: '全身'
        },
        {
            value: '臀部'
        },
        {
            value: '手臂'
        },
        {
            value: '腰部'
        },
        {
            value: '胸部'
        },
        {
                value: '全身'
            },
            {
                value: '臀部'
            },
            {
                value: '手臂'
            },
            {
                value: '腰部'
            },
            {
                value: '胸部'
            },
            {
                value: '全身'
            },
            {
                value: '臀部'
            },
            {
                value: '手臂'
            },
            {
                value: '腰部'
            },
            {
                value: '胸部'
            }
    ])

    let selectClick1 = index => {
        selectIndex1.value = index
    }
</script>

<style>
    ::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        -webkit-appearance: none !important;
        background: transparent !important;
        color: transparent !important;
    }
</style>
<style lang="scss" scoped>
    .content {
        padding-top: 23rpx;
        padding-left: 27rpx;
        padding-right: 29rpx;
        .title {
            font-size: 29rpx;
            font-family: PingFang SC;
            font-weight: 600;
            color: #222222;
        }

        .slider_box {
            box-sizing: border-box;
            margin-top: 45rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .section_title {
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #212121;
                margin-right: 81rpx;
                white-space: nowrap;
            }
            .scroll_view {
                white-space: nowrap;
                .scroll_content {
                    display: flex;
                    align-items: center;
                    .scroll_view_item {
                        white-space: nowrap;
                        display: flex;
                        width: 107rpx;
                        height: 47rpx;
                        background: #FF5687;
                        border-radius: 23rpx;
                        font-size: 24rpx;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #FFFFFF;
                        margin-right: 52rpx;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }
        }
    }
</style>

效果图

实际效果

Answer 1

因为用了flex布局
scroll_content加white-space: nowrap;去掉flex布局
scroll_view_item 加display:inline-block

Answer 2

因为你的<view class="scroll_content" />使用了display: flex;

display: flex;默认是不换行的，所以所有元素会直接挤压在一行。

解决：
把.scroll_content样式里面的display: flex去掉；子元素.scroll_view_item可以用display: inline-block转成块级内联元素