The result I have right now is like this.

The result I need is like this.

Here is my code:

<div style="width:839px">
            <ProfileReviewList v-if="menuValue === 'item1'"/>
            <ProfileCourseList v-if="menuValue === 'item3'"/>
            <ProfileFollowUserList v-if="menuValue === 'item2'"/>
        </div>

When I modify width:839px as width:100%,it works badly. But for compatibility, I cannot use a fixed width.

Here is ProfileFollowUserList.vue

<template>
    <UserItemList style="width: 100%;"/>
</template>

<script lang="ts" setup name="">
    import UserItemList from '@/components/userItem/UserItemList.vue';
    
</script>

<style scoped lang="scss">
    
</style>

Here is UserItemList.vue

<template>
    <div class="userItemList">
        <UserItem
            v-for="(user, index) in users"
            :key="index"
            :avatarImage="user.avatarImage"
            :userName="user.userName"
            :numberOfNewReviews="user.numberOfNewReviews"
        />
    </div>
</template>

Here is UserItem.vue

<template>
    <div class="userItem">
        <div class="block1">
            <t-avatar :image="avatarImage" size="50px" style="margin-right: 20px"/>
            <div>
                <span class="username">{{ userName }}</span>
                <div class="tip-wrapper">
                    <span class="tip">{{ numberOfNewReviews }}条新点评</span>
                </div>
            </div>
        </div>
        <t-button v-if="follow" theme="default" @click="cancelFollow">已关注</t-button>
        <t-button v-if="!follow" theme="primary" @click="goonFollow" style="padding: 0 22px">关注</t-button>
    </div>
</template>


<style scoped lang="scss">
    .userItem {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 5;
        margin-bottom: 20px;
        width: 100%;
    }
    .block1 {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .tip-wrapper {
        background-color: #f6f8f9;
        border-radius: 8px;
        padding: 0px 10px;
        margin-top: 5px;    
    }
    .tip {
        font-size: 12px;
        color: #666;
    }
</style>

Perhaps the problem lies in how I extend the length of the UserItem so that it can fill the outer container.