Flexbox children shrink up to a certain point (but don't expand if they don't need to)

Question

I\'m a having a bit of an issue here. I have a flexbox container with children of different sizes. Based on quantity and their content children might overflow the parent.

Answer 1

Grid Solution

.container {
            width: 300px;
            border: 1px solid black;
            display: grid;
            grid-template-columns: max-content 80px 80px repeat(2,max-content);
            padding: 5px;
        }

You can use javascript to make the grid-template-column dynamic. Here is the jquery (javascript) solution using flex

.container {
            width: max-content;
            border: 1px solid black;
            display: flex;
            padding: 5px;
        }

$(".container > div").each(function(){
    ($(this).width() < 50) ?
        $(this).css('width','max-content') :
           $(this).css('flex','0 0 80px');
})

This is more dynamic than the grid solution. The only thing is that you will need to have a desired number in $(this).width() < 50 instead of fifty based on your content.