Сейчас есть проблема, что компонент задаёт только максимальную ширину, что приводит к неравномерной вёрстке по ширине если использовать EllipsisText для header (см. подробности в
разделе Скриншот).

Воспроизведение

1. Код

   // import { HorizontalScroll, HorizontalCell, Avatar, EllipsisText } from '@vkontakte/vkui';
   
   const data = [
     {
       id: 1,
       name: 'Иван',
       avatarSrc: 'https://sun9-54.userapi.com/c850536/v850536134/15096d/6806J7q6YwM.jpg',
     },
     {
       id: 2,
       name: 'Александра',
       avatarSrc: 'https://sun9-20.userapi.com/c857416/v857416681/fc6d0/06XQvs4SyiE.jpg',
     },
     {
       id: 3,
       name: 'Толя',
       avatarSrc: 'https://sun9-50.userapi.com/c850536/v850536397/129313/qdVJ7A7xd70.jpg',
     },
     {
       id: 4,
       name: 'Катя',
       avatarSrc: 'https://sun9-41.userapi.com/Zf2HluZJZDYjTbxhnSfeYnHtttBYsYbdjJ3QJQ/aDcJQrVVnbQ.jpg',
     },
   ];
   
   const UserItems = () => {
     return (
       <HorizontalScroll inline>
         {data.map((user, i) => (
           <HorizontalCell onClick={() => {}} key={user.id} size="m" header={<EllipsisText>{user.name}</EllipsisText>}>
             <Avatar size={56} src={user.avatarSrc} />
           </HorizontalCell>
         ))}
       </HorizontalScroll>
     )
   };
   
   <UserItems />

2. Вставить в редактор кода в документации https://vkcom.github.io/VKUI/6.7.0/#/HorizontalCell

Скриншот

1. Разная ширина.
2. Текст не по центру.

Примечание

Для первого потомка нужно точно задать width: 100%, а для самого родителя нужно найти решение. Если задать flex: 1 1 100%;, то теряется смысл выставления max-width. Возможно надо прибегнуть к display: grid на контейнере.

Ссылки

• Equal Columns With Flexbox: It’s More Complicated Than You Might Think