css flex 列自动高度

Question

我正在创建一个大型菜单以保持当前标准； CSS、jquery、引导程序。

Google Images - Mega Menu

我的菜单适用于产品类别，我希望以报纸样式动态创建这些产品类别。很容易，我的工作很好。它需要一个固定的高度，这使它水平溢出。

我目前的想法是，onload，增加每个子菜单的高度，直到没有水平溢出。我可以通过一些手动干预让它工作，这违背了动态布局的目的。

.container {
  width: 800px;
  height: 100px;
  display: flex;
  flex: 1 1 auto;
}

.container .wrap {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column wrap;
  align-content: flex-start;
}

.container .wrap .item {
  width: 150px;
}

<div class="container">
  <div class="wrap">
    <div class="item">Item 1<br>a<br>b</div>
    <div class="item">Item 2<br>a</div>
    <div class="item">Item 3<br>a<br>b<br>c<br>d</div>
    <div class="item">Item 4<br>a</div>
    <div class="item">Item 5<br>a</div>
  </div>
</div>

这种样式可以根据需要完美地从上到下、从左到右对齐项目。

现在我正在尝试根据需要增加每个子菜单的高度。最好的解决办法是检测宽度溢出并增加高度来补偿。

我已经尝试过原生 JS 和 jQuery，但我似乎无法在函数中运行它。我可以检测到溢出并增加高度，如下面的代码。我想要的是让 if 语句在一个循环中并在不再溢出时退出，并以完美契合结束。

编辑 当前的工作解决方案

$(function () {
    $(".container").each( function( index, element ){
        var my_height = $(element).outerHeight();

        if( $(element).prop('scrollWidth') > $(element).outerWidth() ) {
            while( $(element).prop('scrollWidth') > $(element).outerWidth() )
            {
                my_height += 100;
                $(element).css('height', my_height + "px");
            }
        }
    });
});

完全按照预期工作。

编辑

更新的问题。有更好的解决方案吗？不涉及在每个页面上循环遍历每个项目的东西。纯 CSS 会很好，但现在还不可能。

解决了我的过渡问题。当尝试像上面那样在循环中更新高度时，过渡 CSS 会干扰并创建一个无限循环。很容易解决，我在 .container .transition 中添加了一个新类，并在开头或循环中添加了 $(element).removeClass("transition");，在末尾添加了 $(element).addClass("transition");。这会从内部循环中移除过渡 CSS，并将其添加到最后。

最终编辑

我的第一次尝试是使用 css 列，但我无法让它符合我的规范。直到阅读了下面接受的答案后，我才重新访问了专栏，并经过一些测试使其正常工作。

参考https://developer.mozilla.org/en-US/docs/Web/CSS/columns

Answer 1

有一种使用纯 CSS 使用 column CSS 属性的方法：

基础 CSS：

.container {
    width: 800px;
}
.container .wrap {}
.container .wrap .item {
    width: 150px;
}

要有固定宽度的列：

.container .wrap {
    column-width: 125px;
}

设置列数：

.container .wrap {
    column-count: 5;
}

JSFiddle

Another answer giving details about browser support