Windows 8 Flexboxes - 启用溢出的嵌套Flexbox [英] Windows 8 Flexboxes - Nesting Flexboxes with overflow enabled

问题描述

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

I am attempting to create a horizontally flexible screen in a Windows 8 store app with several groups stretching out horizontally (contained in the outer Flexbox), and various fields under the groups listed vertically, wrapping from the bottom of the screen to the top as necessary (contained in a series of inner Flexboxes). This is a similar layout to a grouped Windows 8 ListView, but because I am displaying fields related to a single data item, and certain sections will contain ListViews elsewhere in the page, I cannot use a listview to display the data.

每当内部Flexbox部分包装到一个新列时，我遇到了一个问题：Flexbox放在包装Flexbox后面出现一列宽度，而不是前面部分是。如下面的截图所示：

I have run into a problem whenever the inner Flexbox sections wrap to a new column: The Flexboxes placed after the wrapping Flexbox appear one column width away, rather than however many column widths the previous section is. This is illustrated in the following screenshot:

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

Not quite what I had in mind! What I would like would look like what is shown below (Created by manually setting the margin on the sections with overflow.)

此页面的HTML如下：

The HTML for this page is as follows:

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

有什么办法可以实现我的目标第二张图片与我有弹性框设置？如果没有，是否有另一种方法，将允许页面上的内容水平运行，只要它需要去？我想让应用程序流畅和灵活，就像它是与网格视图，但作为

Is there any way to achieve what I was aiming for in the second picture with the flex box setup that I have? If not, is there another method that will allow the content on the page to run off horizontally as far as it needs to go? I want the app to be fluid and flexible like it is with the grid view, but as I mentioned, it is not possible for me to use that.

推荐答案

这是我最后使用的最后一个方法：

This is the final method I ended up using:

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

我相信这在大多数情况下都可以工作，它在任何，但我的。再次，如果有人有更好的解决方案，这将是有趣的看到！

I believe that this should work in most cases, but I have not really tested it in any but mine. Once again, if anyone has a better solution, it would be interesting to see!

这篇关于Windows 8 Flexboxes - 启用溢出的嵌套Flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！