Zurb Foundation 6 XY Grid using Grid Container within Flex-Container

Question

I am using ZURB foundation 6 with XY grid and have run into a little problem and most likely something I'm doing wrong.

I want to center elements vertically so I use

<div class="flex-container">
    <div class="grid-x grid-padding-x align-middle">
      <div class="small-6 cell">Vertically Centered Left Column</div>
      <div class="small-6 cell">Vertically Centered Left Column</div>
    </div>
</div>

And using jQuery I set the height of flex-container by using windowHeight = $(window).innerHeight();

Voila the items are vertically aligned... However two issues arise from this:

1. small-6 cell has a width of 50% that is not being respected and shrinks down to the approx length of the text.
2. flex-container unlike grid-container does not have a width or padding.

To resolve the issue I added some CSS like so:

.flex-container .align-middle {
    max-width: 62.5rem;
    margin: 0 auto;
    width: 100%;
}

So while I've patched the issue I can't help thinking that there must be an easier way, a proper way using just classes. It seems odd that grid-container is setup to do so but flex-container is not.

Answer 1

The main problem here is that with flex-container, the grid-x element will, along being a flex container of its own, also become a flex row item, having the default flex item value 0 1 auto.

This means the grid-x won't grow wider than its content, hence width: 50% won't work on its children (small-6), as their parent doesn't have a width set.

By adding e.g. flex-child-grow or cell to the grid-x element, it will fill its parent's width, and the inner flex items will start behave as expected.

Note 1: With grid-container this is not needed since it is not a flex container, where the grid-x is a normal div, displayed as flex, which, like a block element, by default take full width of its parent.

Note 2: Both flex-container and grid-container does have a default width of 100%, it is the grid-x, when being a flex item, that cause the issue not taking its parent's width by default.

Stack snippet

/*  for demo purpose  */ 
body            { margin: 0; }
.flex-container { height: 100vh; }
.grid-x         { border: 1px solid red; }
.small-6        { border: 1px solid blue; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>

<div class="flex-container">
    <div class="flex-child-grow grid-x grid-padding-x align-middle">
      <div class="small-6 cell">Vertically Centered Left Column</div>
      <div class="small-6 cell">Vertically Centered Left Column</div>
    </div>
</div>