Zurb Foundation 6 XY Grid с использованием Grid Container внутри Flex-Container

Question

Я использую ZURB foundation 6 с сеткой XY и столкнулся с небольшой проблемой, и, скорее всего, я что-то не так делаю.

Я хочу центрировать элементы по вертикали, поэтому я использую

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

И с помощью jQuery я установил высоту flex-контейнера с помощью windowHeight = $(window).innerHeight();

Вуаля элементы выровнены по вертикали... Однако из этого вытекают две проблемы:

1. small-6 cell имеет ширину 50%, которая не соблюдается, и уменьшается до приблизительной длины текста.
2. flex-container В отличие от grid-container не имеет ширины или отступов.

Чтобы решить эту проблему, я добавил немного CSS:

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

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

Answer 1

Основная проблема здесь заключается в том, что с flex-container, grid-x Элемент, будучи собственным контейнером flex, также станет элементом строки flex, имеющим значение по умолчанию flex стоимость предмета 0 1 auto,

Это означает, что grid-x не будет расти шире, чем его содержание, следовательно width: 50% не будет работать на своих детей (small-6), поскольку их родитель не имеет установленной ширины.

Добавив, например, flex-child-grow или же cell к grid-x элемент, он будет заполнять ширину своего родителя, и внутренние элементы flex начнут вести себя как положено.

Примечание 1: с grid-container это не нужно, так как это не гибкий контейнер, где grid-x это нормально div отображается как flex , который, как block элемент по умолчанию принимает полную ширину его родителя.

Примечание 2: оба flex-container а также grid-container имеет ширину по умолчанию 100%, это grid-x , будучи гибким элементом, это приводит к тому, что проблема не принимает ширину родительского элемента по умолчанию.

Фрагмент стека

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