When utilizing the Foundation XY-grid, I encountered an issue with distributing cell heights evenly within a nested grid-y inside a cell using the .auto class on the parent cell. In a scenario with 2 cells in a grid-y, the desired outcome is 50%/50%.
This approach works well if the content within the grid-y cell is compact enough to stay within the boundaries of the cell. However, when the content exceeds the cell height, it gets cut off.
To resolve this issue, I found a workaround by changing the flex-basis value for the .auto class from "0px" (as per Foundation CSS default) to "auto". This solution allows taller content to expand the cell without cropping.
However, when dealing with smaller content, the distribution of parent cell heights does not remain even as expected.
It's worth noting that including ".grid-y" on each cell enables vertical center alignment for the cell content. For more information, refer to: Vertically align content inside XY-Grid Cell
<div class="grid-container">
<div class="grid-x">
<div class="cell medium-6 grid-y align-middle align-center" style="background:green;">
<div style="background: blue; height: 300px">
Element A
</div>
<div style="background: violet; height: 300px">
Element B
</div>
</div>
<div class="cell medium-6 grid-y align-middle align-center" style="background:red;">
<!-- Nested Grid -->
<div class="grid-y" style="min-height: 100%; width: 100%;">
<div class="cell auto grid-y align-middle align-center" style="background:yellowgreen;">
<div style="background: yellow; height: 50px">
Element C
</div>
<div style="background: gray; height: 50px">
Element D
</div>
</div>
<div class="cell auto grid-y align-middle align-center" style="background:darkcyan;">
<div style="background: yellow; height: 70px">
Element E
</div>
<div style="background: gray; height: 70px">
Element F
</div>
</div>
</div>
</div>
</div>
</div>
Customized CSS:
.grid-y > .cell.auto {
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
As opposed to the original Foundation code:
flex: 1 1 0px