Menu icon Foundation
F6 Flex Grid Issue/Bug

I seem to have an issue with sizing and the flex grid... maybe a bug..

Simple premise, 4 boxes in one row. For small, I want to stack the first two boxes at 50% each, then stack the latter two at 100%. My code seems to work fine with the initial layout... BUT... there is extra space created off screen to the right. This extra space create issues with other items on the page set to 100% (e.g., Top Bar, which stretches beyond the 100% view port).

If I revert all boxes to small-12, works fine, no extra space on the right. Thus it seems there is a bug in sizing calculations causing the window to expand, as the row sizes at 100% of the window.

<div class="row small-collapse">

    <section class="small-6 columns" id="x" data-magellan-target="x">
        stuff   
    </section>
    
    <section class="small-6 columns">
       stuff
    </section>

    <section class="small-12 columns" id="y" data-magellan-target="y">
        Stuff
    </section>

    <section class="small-12 columns" id="z" data-magellan-target="z">
        stuff
    </section>
</div>

F6flex-gridtop-bar

I seem to have an issue with sizing and the flex grid... maybe a bug..

Simple premise, 4 boxes in one row. For small, I want to stack the first two boxes at 50% each, then stack the latter two at 100%. My code seems to work fine with the initial layout... BUT... there is extra space created off screen to the right. This extra space create issues with other items on the page set to 100% (e.g., Top Bar, which stretches beyond the 100% view port).

If I revert all boxes to small-12, works fine, no extra space on the right. Thus it seems there is a bug in sizing calculations causing the window to expand, as the row sizes at 100% of the window.

<div class="row small-collapse">

    <section class="small-6 columns" id="x" data-magellan-target="x">
        stuff   
    </section>
    
    <section class="small-6 columns">
       stuff
    </section>

    <section class="small-12 columns" id="y" data-magellan-target="y">
        Stuff
    </section>

    <section class="small-12 columns" id="z" data-magellan-target="z">
        stuff
    </section>
</div>
Rafi Benkual over 3 years ago

Is this your first time using Flexbox? How has it helped building layouts?

That would be odd. With the information you've provided, I can't replicate it. http://codepen.io/rafibomb/pen/BjRjON

Could be another CSS rule on the page?

Aaron J. over 3 years ago

Hi Rafi,

Yes -- that was my first time using Flexbox. I ended up tweaking the design to avoid the issue. Hence, I did not split the two boxes. And I have been able to split other using similar with other code. Thus - two things came to mind. First, there was something my code triggering the behavior, although I am not sure that anything incorrect, per ce, but was done chasing ghosts since the two units of code were pre-existing components -- I was not thrilled with the idea of digging deep into the code, just to shoe-horn into the grid. BUT I think I could have to do with shadowed boxes, since the shadow extends, some browsers may have been compensating... and maybe 2 boxes was 1 to many and the extra scroll space to the right was generated... Was my leading theory after I moved on, but hat not re-tested.

The 2nd note, is that, I started tracking very different behavior with IE 11 -- which does not seem to enjoy the Flex Grid consistently. I was going back and forth, before really catching that. But I was fair sure the issue here was most prominent is IE and IE mobile; but did surface on others.

To your other question: After some iterations and scars, I enjoy many aspects of the FlexBox, and it has helped since I am only concerned up-to-date browsers. It's a learning process... Re-ordering FlexBoxes is very handy. BUT getting the sizing just right with expected responsive behaviors is NOT as easy I would like. It could be my patterns, but shrink does not seem to do much for me. Again, could be my coding, but this one area has cause me to spend more time than planned. I have just about given up on shrink, at still mix in floating as much more efficient or easier... so.. 60/40 so far, improving slowly.

As far as my issue here, I should go back and look again. I have retro-fitted much of the surrounding code to be more F6 tolerant, and my issue could be gone. It started with 6.0x... thus maybe it's worth a revisit with 6.1.x. I will advise on that later.

Regards.
AJ

Aaron J. over 3 years ago

Basically, I confirmed what I believe was causing my issue. I added shadows to the flex-grid containers, and right margin via CSS. IE seems to not include the margin part as of 100%, and causes 2 50% containers to wrap. And/or it seems to mess-up the 100% calculation and extend the window port.

Not really sure who is at fault per. Margin and shadows, IMO should be part of the 100%, but I believe the spec says they (or one of) are not... Browsers vary on how that gets calculated for sure...

So, in the end, I can work around it in various ways... e.g., remove margins in my CSS, that I added to push way from the shadows... wrap less formatted tags...

Rafi Benkual over 3 years ago

I'm assuming you're using box-shadow? It's not part of the sizing calculation of the box so it shouldn't push anything. Margin is not part of the sizing calculation either: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

I think the huge advantage of flexbox I've loved so far is the ordering and the alignment. I also like making components like menus with it so I don't have to use the display: table method.

Aaron J. over 3 years ago

Hi Rafi,
Been a while.. I needed to step back given the joy and pain... so here is what I learned since...

Box-shadow: It sort-a created issues... the real issue was the margin-right I added push shadowed boxes over when floating (prior to flex-grid). I was able to work around that by clearing the right margin.

The other issue I was seeing was/is that IE does not like F6 shorthand classes [size]-unstack. If you don't use small-xx medium-xx ... in the containers IE/Edge defaults to unstack on all.

Agreed, I love the flexible ordering per size.

Overall, I am enjoying the FlexBox -- but shrink is still a but of hit and miss...