Как заполнить flex-блок элементами разной ширины аналогично тому как это происходит в таблице?

Question

[kiberlain]

Answer 1

[Kir ---]

Если вас интересует именно flex, то это можно провернуть различными способами.
Например можно расставить всем блокам ширину 100% и указать коэффициент сжатия колонок.
Тогда всё будет как вы хотите, но нужно заранее знать где будет больше, а где будет меньше текста.

#container {
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;  
    width: 100%;
}

#container > div {
    flex-basis: 100%;
}
#container > div:nth-child(1) {
    flex-shrink: 4;
}
#container > div:nth-child(2) {
    flex-shrink: 3;
}
#container > div:nth-child(3) {
    flex-shrink: 2;
}

Answer 2

[GreatRash]

codepen.io/GreatRash/pen/JoepLJ

Comments

[kiberlain]

спасибо!