使带有收缩配合柱的柔性容器

Question

假设我们有一个容器,其子容器必须用列填充它.容器的高度有限,并且必须与所有后代适合的宽/窄一样宽.它应该如下所示:

为了做到这一点,我试试flexbox.问题是:它是否有可能缩小适合？

• float:left:在Chrome中根本没有做到这一点,在Firefox中,容器的宽度只有一列 - 例如1
• position:absolute:它对正常流量没有贡献,所以放弃它.

目前我将浏览器范围缩小到Chrome和FF.

HTML:

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

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 */
}

谢谢!

Answer 1

JavaScript 解决方案：

$(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);
    })
});