我正在研究嵌套的flexbox布局,它应该如下工作:

最外层(ul#main)是一个水平列表,当添加更多项时,它必须向右扩展.如果它变得太大,应该有一个水平滚动条.

#main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* ...and more... */
}

此list(ul#main > li)的每个项目都有一个header(ul#main > li > h2)和一个内部列表(ul#main > li > ul.tasks).此内部列表是垂直的,应在需要时包装到列中.当包装到更多列时,其宽度应该增加,以便为更多项目腾出空间.此宽度增加也应适用于外部列表的包含项.

.tasks {
    flex-direction: column;
    flex-wrap: wrap;
    /* ...and more... */
}

我的问题是当窗口的高度太小时内部列表不会换行.我已经尝试了很多篡改所有的flex属性,试图仔细遵循CSS-Tricks的指导,但没有运气.

这个JSFiddle显示了我到目前为止所拥有的内容.

预期结果 (我想要的):

实际结果 (我得到的):

较旧的结果 (我在2015年得到的):

UPDATE

经过一番调查,这开始看起来像一个更大的问题.所有主流浏览器的行为方式都相同,而且与我的嵌套Flexbox设计无关.更简单的flexbox列布局拒绝在项目换行时增加列表的宽度.

这其他的jsfiddle清楚地表明了问题.在当前版本的Chrome,Firefox和IE11中,所有项目都正确包装; 列表的高度在row模式中增加,但其宽度在column模式下不会增加.此外,在更改column模式的高度时,根本没有立即回流元素,但存在row模式.

然而,官方规范 …

精简版

使用flex-flow: column wrap和时display: inline-flex,它不收缩包装inline-block:

(function() {
  var ascending = true;
  setInterval(function() {
    var parent = document.getElementById('flex');
    if (ascending) {
      var child = document.createElement('p');
      child.innerHTML = "foo";
      parent.appendChild(child);
    } else {
      parent.removeChild(parent.children[0]);
    }
    if (parent.children.length <= 1) ascending = true;
    if (parent.children.length >= 40) ascending = false;
  }, 20);
})();
(function() {
  var ascending = true;
  setInterval(function() {
    var parent = document.getElementById('failex');
    if (ascending) {
      var child = document.createElement('p');
      child.innerHTML = "foo";
      parent.appendChild(child);
    } …

所以我有一个带有列和最大高度的flexbox,使列在3列中彼此相邻.

这在Chrome中运行良好,但在Safari中,它似乎只使用最后(最右边)列来设置容器的实际高度.

我在这里举了一个例子:

section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 400px;
  padding: 10px;
  border: 1px solid green;
}

div {
  flex-basis: 100px;
  width: 100px;
  background-color: red;
  margin: 10px;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

Chrome和Safari中的结果将在下方进行屏幕截图.

铬:

苹果浏览器:

这似乎是一个明显的错误,但我找不到任何有关它的信息.

我想知道的是:

1. 这有什么变通方法吗？和
2. 有没有被报道为bug？

我正在创建一个大型动态导航菜单,我希望看起来像这样:

[----------- 100% PAGE WIDTH -----------] | GROUP A | GROUP C | GROUP F | GROUP G | | item | item | item | item | | item | | item | item | | | GROUP D | item | item | | GROUP B | item | item | | | item | | | | | item | GROUP E | | | | | item | | | |---------------------------------------| | | | | [------------- …