Как сделать так, чтобы блок уменьшал или увеличивал свою ширину в зависимости от контента, не оставляя пустых зазоров?

Question

[TakeshiKoma]

есть такой блок, написанный на flexbox

<div class="main-container">
 <div class="container">
   //чайлды
 </div> 
</div>

.main-container {
 display: flex;
 max-width: 500px;
}
.container {
 display: flex;
 width: auto;
}

как я могу сделать так, что бы содержимое вмещалось в контейнер и не оставляло пустых зазоров, которые есть на скриншоте после email?

Comments

[Ankhena]

Растянуть ячейки, например, с помощью flex-grow

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента. Также обратите внимание на п.3.4

[RusticAnd]

нужно понять что такое flex для начала, посмотреть хотя бы Дмитрия Лаврика. А не впихивать везде display:flex без раздумий

[Ankhena]

RusticAnd, Тут больше вопрос, зачем вообще нужна внешняя обертка. Но если в ней есть что-то ещё кроме списка, то тогда и флекс, вероятно, оправдан.
А для решения задачи именно он и нужен.