Windows 8 Flexboxes - Nesting Flexboxes with overflow enabled

Question

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.

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.)

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

and as for the 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.

Answer 1

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!

Answer 2

My problem was that i got a height and a contentBox which was to narrow.

My solution:

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