Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make flex container with columns shrink-to-fit

Assume we have a container, whose children have to fill it in columns. The container is limited in height and has to be as wide/narrow as need for all the descendants to fit. It should look like this:

enter image description here

To make this I try flexbox. The question is: is it possible to make it shrink-to-fit?

  • float:left: in Chrome doesn't do the trick at all, in Firefox the container has the width of only one column - example 1
  • position:absolute: it doesn't contribute to normal flow, so discard this.

For now I narrow down the browser range to Chrome and FF.

The HTML:

<div class="flexcontainer wrap column">
    <div></div>
    <div></div>
    ...
</div>

The CSS:

.flexcontainer{
    display: flex;              /* make it a flexbox */
    flex-flow: column wrap;     /* make it a column container, and fill them one after another */

    align-content: stretch;
    align-items: center;
    justify-content: center;

    float: left;                /* shrink-to-fit */

    max-height: 450px;          /* limit the height */
    min-height: 300px;
}
.flexcontainer > div {
    height: 100px;            
    margin: 3px;
    width: 100px;               /* set the width of descendants */
}

Thanks!

like image 432
bonflash Avatar asked Aug 21 '14 07:08

bonflash


People also ask

How do I reduce the size of my flex box?

The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink .

Does Flex-grow work for columns?

Flex-grow in Column Based Layout This makes sense if you have a fixed design and you know exactly the size of the content. The flex-grow property will not work if the content of one of the items is higher than the height the item is supposed to have.

How do I align Flex items in columns?

The flex columns can be aligned left or right by using the align-content property in the flex container class. The align-content property changes the behavior of the flex-wrap property. It aligns flex lines. It is used to specify the alignment between the lines inside a flexible container.

How do you wrap a column in Flex?

Making things wrap If you want to cause them to wrap once they become too wide you must add the flex-wrap property with a value of wrap , or use the shorthand flex-flow with values of row wrap or column wrap . Items will then wrap in the container.


1 Answers

Javascript solution:

$(document).ready(function() {
 $('.flexcontainer').each(function( index ) {
     var parentHeight = $(this).outerHeight();
     var childHeight = $(this).children().outerHeight();
     var childCount = $(this).children().length;
     var cols = Math.ceil(childHeight*childCount/parentHeight);

     var childWidth = $(this).children().outerWidth();
     var padding = 15;
     $(this).width(childWidth*cols+padding);
    })
});
like image 97
David Machado Avatar answered Oct 14 '22 04:10

David Machado