How to fill a flex block with elements of different widths in the same way as it happens in a table?

Question

css

Answer 1

If you are interested in exactly flex, then this can be done in various ways.
For example , you can set the width of all blocks to 100% and specify the column compression ratio.
Then everything will be as you want, but you need to know in advance where there will be more and where there will be less text.

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