How to make a flex column container shrinks to its content

Question

The component I must implement looks like the tile groups on Metro :

the width of the horizontal flow of groups depends of the number of groups
each group contains a title, its width must be extended to the group content
each group contains an undetermined number of tiles arranged by columns

I nearly reach the goal, but I don't get why the flex container extends itself. Is there a way to shrink its width to its own content width (remove the blue space on the right of cyan tiles)

DEMO :

http://jsfiddle.net/5ar0yyks/

CSS :

div.vertical { 
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-self:flex-start;
    align-items: flex-start;        
    background-color:blue;
    max-height:100%;
}

HTML :

<div class="vertical">
    <div class = "vertical-tile">
        1                       
    </div>      
    <div class = "vertical-tile">
        2                    
    </div>
    <div class = "vertical-tile">
        3                        
    </div>
</div>

if you think it's not the good approach, what's your proposal to resolve this issue?

score 2 · Accepted Answer · answered Oct 07 '14 at 08:56

I finally get the answer by myself

Actually it seems that it cannot be made only by CSS due to different browser behaviors regarding the flexbox implementation

Code :

$(document).ready(function() {
 $('.vertical').each(function( index ) {
     var lastChild = $(this).children().last();
     var newWidth = lastChild.position().left - $(this).position().left + lastChild.outerWidth(true);
     $(this).width(newWidth);
    })
});

Demo :

http://jsfiddle.net/btuspmz6/2/

How to make a flex column container shrinks to its content

1 Answers1