Как равномерно распределить высоту ячеек в Foundation XY-grid (flexbox)

Question

Используя базовую XY-сетку и, в частности, вложенную grid-y внутри ячейки, я хочу использовать класс.auto в родительской ячейке для равномерного распределения высоты ячейки, в случае grid-y с 2 ячейками, которые будут 50%/50%.

Это работает нормально, пока содержимое ячейки сетки достаточно низкое, чтобы поместиться внутри ячейки, не сдвигая границы. Однако если содержание выше, оно обрезается.

Обойти это можно, установив flex-based для класса.auto в значение "auto" вместо "0px", которое является предопределенным значением в Foundation css.

Это прекрасно работает, если содержимое достаточно велико, чтобы раздвинуть границу ячейки, но если оно меньше, то высота родительской ячейки распределяется неравномерно.

Примечание: использование ".grid-y" в каждой ячейке должно иметь возможность располагать содержимое центра ячейки вертикально. Пожалуйста, смотрите: Вертикальное выравнивание содержимого внутри ячейки XY-Grid

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

Модифицированный CSS:

.grid-y > .cell.auto {
 -webkit-box-flex: 1;
 -webkit-flex: 1 1 auto;
 -ms-flex: 1 1 auto;
 flex: 1 1 auto;
}

вместо оригинального кода Foundation:

flex: 1 1 0px

Answer 1

Поскольку сетка уже использует Flexbox, вы можете настроить горизонтальную сетку и ячейки равной высоты, сделав так, чтобы ячейки также отображали flex.

Пример: https://codepen.io/rafibomb/pen/wLWKXL

<div class="grid-x">
   <div class="cell flex-container auto">
      <img src="http://placehold.it/20" alt="">
   </div>
      <div class="cell flex-container auto">
        <img src="http://placehold.it/50" alt="">
      </div>
     <div class="cell flex-container auto">
       <img src="http://placehold.it/700" alt="">
     </div>
  </div>