Css 使带柱的柔性容器收缩以适合

假设我们有一个容器，其子容器必须在列中填充它。容器的高度有限，并且必须尽可能宽/窄，以适合所有子体。应该是这样的：

要做到这一点，我尝试

flexbox

。问题是：有没有可能让它缩小到合适的尺寸

• float:left

  ：在Chrome中根本不起作用，在Firefox中，容器的宽度只有一列-

• position:absolute

  ：它对正常流量没有贡献，所以放弃它

现在我把浏览器范围缩小到Chrome和FF

HTML：

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

谢谢

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

---

是否有最大数量的项目？另外，您的页面是否可以扩展到超出视口的正常宽度和高度？是否有关于如何解决此问题的任何更新，或者jquery是唯一的方法？是否可能重复

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