如何实现自适应宽度填充父容器的列表项组件

当前实现效果 #

期望达到的效果 #

当前代码中，内容容器使用固定宽度width:839px时显示正常，但改为width:100%后布局效果极差。出于兼容性考虑不能依赖固定宽度，怀疑问题出在UserItem组件无法填充外层容器，需要解决方法。

相关代码 #

主组件代码 #

<template>
    <t-space direction="vertical">
        <div class="user-container">
            <t-avatar size="100px" :image="avatarImage" alt="用户头像" shape="circle"/>
            <span class="UserName">{{ userName }}</span>
        </div>
        <div>
            <t-head-menu v-model="menuValue" @change="changeHandler">
                <t-menu-item value="item1">点评</t-menu-item>
                <t-divider layout="vertical"/>
                <t-menu-item value="item2">关注用户</t-menu-item>
                <t-divider layout="vertical"/>
                <t-menu-item value="item3"> 关注课程 </t-menu-item>
            </t-head-menu>
        </div>
        <t-divider style="margin-top: 0; margin-bottom: 0"/>
        <div style="width:839px">
            <ProfileReviewList v-if="menuValue === 'item1'"/>
            <ProfileCourseList v-if="menuValue === 'item3'"/>
            <ProfileFollowUserList v-if="menuValue === 'item2'"/>
        </div>
    </t-space>
</template>

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>

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>

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>

问题核心是嵌套组件的宽度未正确继承，导致width:100%无法生效，按以下步骤修改：

1. 调整主容器样式
   移除主组件内容容器的固定宽度，改为width:100%，同时给t-space添加宽度控制，确保它填充父容器：

<t-space direction="vertical" style="width: 100%;">
    <!-- 其他代码 -->
    <div style="width: 100%;">
        <ProfileReviewList v-if="menuValue === 'item1'"/>
        <ProfileCourseList v-if="menuValue === 'item3'"/>
        <ProfileFollowUserList v-if="menuValue === 'item2'"/>
    </div>
</t-space>

2. 确保UserItemList填充父容器
   给UserItemList的.userItemList类添加宽度样式，让它继承父组件宽度：

<template>
    <div class="userItemList">
        <!-- 其他代码 -->
    </div>
</template>

<style scoped lang="scss">
.userItemList {
    width: 100%;
}
</style>

3. 修复UserItem的margin单位问题
   .userItem中的margin-top:5缺少单位，改为margin-top:5px避免布局异常：

.userItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px; /* 补上单位 */
    margin-bottom: 20px;
    width: 100%;
}

4. 可选：添加最大宽度限制
   若担心容器过宽影响布局，可给最外层t-space添加max-width，兼顾兼容性与响应式：

<t-space direction="vertical" style="width: 100%; max-width: 839px;">
    <!-- 其他代码 -->
</t-space>

修改后组件会自动填充父容器宽度，同时避免固定宽度的兼容性问题，达到期望布局效果。

内容的提问来源于stack exchange，提问作者zzhzzh