Windows 8 Flexboxes - 启用溢出的嵌套 Flexboxes答案

【问题标题】：Windows 8 Flexboxes - Nesting Flexboxes with overflow enabledWindows 8 Flexboxes - 启用溢出的嵌套 Flexboxes
【发布时间】：2012-09-13 00:47:42
【问题描述】：

我正在尝试在 Windows 8 商店应用程序中创建一个水平灵活的屏幕，其中有几个水平延伸的组（包含在外部 Flexbox 中），以及垂直列出的组下的各个字段，从屏幕底部环绕到top 根据需要（包含在一系列内部 Flexbox 中）。这是与分组的 Windows 8 ListView 类似的布局，但是因为我正在显示与单个数据项相关的字段，并且某些部分将在页面的其他位置包含 ListView，所以我不能使用列表视图来显示数据。

每当内部 Flexbox 部分换行到新列时，我都会遇到问题：放置在换行 Flexbox 之后的 Flexbox 出现在一个列宽之外，而不是前一部分的列宽多少。这在以下屏幕截图中进行了说明：

跟我想的不太一样！我想要的如下所示（通过手动设置溢出部分的边距创建。）

此页面的 HTML 如下：

<section aria-label="Main content" role="main">            

  <div class="main-container">  

    <div id="n1" class="inner-container">
      <div class="element"></div>
      .. And so on

至于 CSS：

.test section[role=main] {    
    overflow-x: scroll;
    overflow-y: hidden;
    -ms-overflow-style:-ms-autohiding-scrollbar;
}

.main-container {
    display: -ms-flexbox;
    /*We will put a slight margin at the bottom of the page to keep elements from appearing too low*/
    height: calc(100% - 60px);
}

.inner-container {
    display: -ms-flexbox;
    -ms-flex-direction: column;
    -ms-flex-wrap: wrap;
    margin-right: 50px;
}

.element {
    border:solid;
    width:150px;
    height:150px;
}

#n1 .element {
    background-color:red;
}

#n2 .element {
    background-color:green;
}

#n3 .element {
    background-color:blue;
}

#n4 .element {
    background-color:goldenrod;
}

有什么方法可以通过我拥有的弹性框设置来实现我在第二张图片中的目标吗？如果没有，是否有另一种方法可以让页面上的内容在需要的地方水平运行？我希望应用程序像网格视图一样流畅灵活，但是我提到了，我不可能使用它。

【问题讨论】：

标签： html css windows-8 flexbox

【解决方案1】：

我的问题是我的高度和内容框变窄了。

我的解决方案：

var groups = element.querySelectorAll('.contentBox');
for (var i = 0; i < groups.length; i++) {
    var group = groups[i];
    var tempwidth = 0;
    while (group.childNodes[1].scrollHeight > group.scrollHeight) {
        tempwidth = tempwidth + 100;
        group.childNodes[1].style.width = tempwidth + 'px';
    }
}

【讨论】：

【解决方案2】：

这是我最终使用的最终方法：

var groups = document.querySelectorAll(".inner-container");

for (var i = 0; i < groups.length; i++) {
  var group = groups[i];
  //The scroll width is the width of the actual content of our flex box. 
  //If we set the div's CSS width to the scroll width, the box will push other flex box elements correctly.
  group.style.width = group.scrollWidth + "px";
}

我相信这在大多数情况下应该可以工作，但除了我自己之外，我还没有真正测试过它。再一次，如果有人有更好的解决方案，那会很有趣！

【讨论】：