Чистый CSS, равный высоте отдельно вложенных контейнеров

Question

Существует множество примеров CSS "столбцы одинаковой высоты", макеты "Святой Грааль", умные реализации display: table-cell и, конечно, некоторые вкусные display: flex идеи там, не в последнюю очередь здесь, на SO.

Но я пытаюсь достичь чего-то, чего не смог найти нигде, и не смог достичь, не прибегая к JS, чего я бы предпочел избежать.

Я пытаюсь создать набор родительских контейнеров одинаковой высоты, каждый из которых имеет набор дочерних элементов, которые разделяют высоту между карточками. Каждая карта отделена от других соседних карт водосточным желобом. Очевидно, я не могу публиковать изображения, потому что я новичок, но это гораздо проще объяснить визуально. Так что вот ссылка на бесплатный сайт хостинга изображений: http://postimg.org/image/ltcd8ns1l/

На изображении вы увидите три карты (1, 2, 3), каждая из которых имеет три секции (1a, 1b, 1c, 2a, 2b, 2c, 3a, 3b, 3c). Каждая секция в карточке имеет ту же высоту, что и эквивалентная секция в других карточках (т.е. 1b = 2b = 3b, 1c = 2c = 3c и т. Д.). Высота каждой эквивалентной секции (например, 1b, 2b и 3b) определяется высотой самой высокой из этих секций (то есть самой высокой 'b'). Высота самого высокого раздела определяется количеством содержимого внутри этого раздела.

Я смог достичь этого визуально, используя display: table метод, включающий отдельные элементы 'table-cell' для желобов между карточками, но, к сожалению, разметка неупорядоченная и не семантическая, что-то вроде этого:

<div class="table-row">
 <div class="heading">heading</div>
 <div class="gutter"></div>
 <div class="heading">heading</div>
 <div class="gutter"></div>
 <div class="heading">heading</div>
 <div class="gutter"></div>
</div>
<div class="table-row">
 <div class="body">body text here</div>
 <div class="gutter"></div>
 <div class="body">body text here</div>
 <div class="gutter"></div>
 <div class="body">body text here</div>
 <div class="gutter"></div>
</div>
<div class="table-row">
 <div class="foot">footer</div>
 <div class="gutter"></div>
 <div class="foot">footer</div>
 <div class="gutter"></div>
 <div class="foot">footer</div>
 <div class="gutter"></div>
</div>

...Какой ужас.

Так что я также смог получить что-то, работающее с display: flex, Вот краткая демонстрация в CodePen: http://codepen.io/anon/pen/xbXWpQ

А для потомков вот HTML:

<div class="flex-wrap">
 <div class="flex-container">
  <a href="#">
   <div class="image">
    <div class="sample-image-one"></div>
   </div>
   <div class="heading">heading: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque 
   </div>
   <div class="body">body text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.</div>
   <div class="foot">footer: Sed ut perspiciatis unde omnis.</div>
  </a>
  <a href="#">
   <div class="image">
    <div class="sample-image-two"></div>
   </div>
   <div class="heading">heading: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</div>
   <div class="body">body text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</div>
   <div class="foot">footer: Sed ut perspiciatis unde omnis iste natus error sit.</div>
  </a>
  <a href="#">
   <div class="image">
    <div class="sample-image-three"></div>
   </div>
   <div class="heading">heading: Sed ut perspiciatis unde omnis iste natus error</div>
   <div class="body">body text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</div>
   <div class="foot">footer: Sed ut perspiciatis.</div>
  </a>
 </div>
</div>

И SCSS:

// wrap & global styles
body, html {
  margin: 0;
  width: 100%;
}
.flex-wrap {
  padding: 3%;
  font-family: sans-serif;
}
.flex-container {
  display: flex;
  flex-wrap: wrap; 
  > div {
    margin-right: 3%; 
    width: 25%; // should be 29.33333% but this doesn't seem to work in codepen
    color: white;
    padding: 15px;
  }
}

// image sections
.image {
  min-height: 100px;
  order: 1;
  background-color: teal;
  > div {
    background-color: coral;
    padding: 10px;
  }
  &:nth-of-type(3n+3){
    margin-right: 0;
  }
}

// sample images of different heights
.sample-image-one { height: 120px; }
.sample-image-two { height: 160px; }
.sample-image-three { height: 80px; }

// copy sections
.heading {
  order: 2;
  background-color: tomato;
  &:nth-of-type(3n+4){
    margin-right: 0;
  }
}

.body {
  order: 3;
  background-color: deepskyblue;
  &:nth-of-type(3n+5){
    margin-right: 0;
  }
}

.foot {
  order: 4;
  background-color: gold;
  &:nth-of-type(3n+3){
    margin-right: 0;
  }
}

Я предпочитаю использовать HTML flex в правильном порядке и не содержит бессмысленных элементов.

Но это не достаточно далеко: я хочу иметь возможность обернуть каждую карту в свой элемент, например. <article>...</article>, Отчасти поэтому вся карта может быть ссылкой, но также потому, что, на мой взгляд, это обеспечит более четкую, более подходящую разметку. Но flex не работает таким образом, так что это сложно.

Я возился целую вечность, но я не вижу способа сделать это без использования JS или неприятного HTML. И то, и другое я бы предпочел избежать.

Есть идеи, как этого добиться?

Answer 1

Ваша цель иметь одинаковую высоту для .sample-image-[x]?

Если это так, вы можете попробовать установить контейнер .image в flex-direction: column, а затем с помощью flex-basis

.image {
  display:flex;
  flex-direction:column;
  min-height: 100px;
  order: 1;
  background-color: teal;
  > div {
    background-color: coral;
    padding: 10px;
    flex-basis:100px;
  }
  &:nth-of-type(3n+3){
    margin-right: 0;
  }
}