Переключить конкретный столбец в двухколонном макете?

Question

Используя CSS Flexbox, я создал макет с двумя столбцами, который переключает столбцы независимо друг от друга.Это то, что я хочу.Однако способ, которым я это сделал, просто кажется непрактичным, потому что мне нужно установить высоту контейнера, чтобы обернуть элементы в макет из двух столбцов.Конечно, я могу рассчитать высоту, основываясь на количестве столбцов, но да. Когда я попытался использовать строку, оба столбца в строке свернулись / развернулись.Смотрите код и дизайн ниже.Итак, мой вопрос;Есть ли более элегантное решение для этого?

HTML

<div class="flex-grid">
   @foreach($parents as $parent)
      <div class="col">
         <div class="header-group group-toggle" id="{{$parent->id}}">
            <h4><a href="{{ url($parent->url()) }}">{{ $parent->name }}</a></h4>
                 <div class="chev-icon">
                    <i class="fas fa-chevron-right rotate"></i>
                  </div>
          </div>
        <div class="sub-group collapse in">
              @include('group.child', $parent)
        </div>
     </div>
   @endforeach
 </div>

CSS

.flex-grid {
   display: flex;
   flex-flow: column wrap;
   align-items: center;
   justify-content: flex-start;
   align-content: center;
   height: 1200px;

   .col {
     width: 50%;
   }
}

Jquery

$('.group-toggle').on('click', function () {
    if ( !$(this).next().hasClass('in')) {
        $(this).parent().children('.collapse.in').collapse('hide');
    }

    $(this).next().collapse('group-toggle'); 
}

Дизайн

Answer 1

Если я правильно понимаю, это должно быть довольно быстрое решение.Беспокойство по поводу высоты столбцов напрямую решается в конфигурации flexbox.

Вместо использования column направление гибкого трубопровода и wrap для гибкого переноса ...

flex-flow: column wrap; /* this is shorthand for flex-direction:column and flex-wrap: wrap */

... Я бы изменил направление на значение по умолчанию row и запретил бы перенос.Это создаст макет с каждым .col элементом, имеющим равную высоту:

flex-direction: row;
flex-wrap: no-wrap;
height: 100%;