javascript - css flex 列自动高度

Question

我正在创建一个试图保持当前标准的大型菜单； CSS、jquery、 Bootstrap 。

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 会很好，但现在还不可能。

解决了我的过渡问题。当尝试像上面那样循环更新高度时，transition 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