верстка не слушается

https://jsfiddle.net/a0byoj48/

.mc__persons {
    display: flex;
    column-gap: 5px;
    max-width: 300px; /*этот кастыль приходится регулировать в зависимости от разрешения*/
    overflow-x: scroll;
}

без ограничения в ширине, в зависимости от наполнения блок '.mc__persons' растягивается и выталкивает кнопку редактирования за пределы экрана. Как сделать чтобы от наполнения он рос только до кнопки после чего начинал скроллился?


Ответы (1 шт):

Автор решения: Vladimir Gonchar

Как вариант, рассчитывать ширину через calc():

.mc__persons {
    display: flex;
    column-gap: 5px;
    width: calc(100vw - 80px);
    overflow-x: scroll;
}
→ Ссылка