css - 使具有列缩小以适应的 flex 容器

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