Как реализовать компонент элемента списка с адаптивной шириной для заполнения родительского контейнера ⇐ CSS

[Anonymous]

Результат у меня сейчас такой.


Мне нужен такой результат.


Вот мой код:

Код: Выделить всё

{{ userName }}


点评

关注用户

 关注课程 

Когда я изменяю ширину: 839 пикселей на ширину: 100%, это работает плохо. Но для совместимости я не могу использовать фиксированную ширину.
Вот ProfileFollowUserList.vue

Код: Выделить всё

import UserItemList from '@/components/userItem/UserItemList.vue';

Вот UserItemList.vue

Код: Выделить всё

Вот UserItem.vue

Код: Выделить всё

{{ userName }}

{{ numberOfNewReviews }}条新点评



已关注
关注




.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;
}

Возможно, проблема заключается в том, как я увеличиваю длину UserItem, чтобы он мог заполнить внешний контейнер.

Подробнее здесь: https://stackoverflow.com/questions/792 ... -parent-co