Равная высота с FlexBox (следующий уровень)

Question

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

Проблема в том, когда у меня тоже есть описание.
Заголовок
Цена
Описание

Есть два примера, потому что я пробовал оба.
Один пример со всем контентом внутри одного элемента, а другой пример, где контент разбивается на два элемента.

У меня одинаковая высота jQueryсценария, но, если возможно, хотите использовать Flex.
На всех элементах есть цвета, чтобы определить, имеют ли они одинаковую высоту.

У меня есть код на codepen, но я также вставлю его сюда.

* {
  box-sizing: border-box;
}

.container {
  background: tomato;
  padding: 20px;
  max-width: 600px;
  margin: auto;
}
.container:not(:first-of-type) {
  margin-top: 40px;
}
.container ul {
  margin: unset;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.container ul li {
  display: flex;
  flex-direction: column;
  width: 32%;
  background: #fff;
  padding: .3em;
}
.container ul li h2 {
  margin: 0;
}

.container.one ul li a {
  background: lightgreen;
}
.container.one ul li a h2, .container.one ul li a p {
  background: pink;
}
.container.one ul li a span {
  background: lightblue;
}

.container.one .loop--item * {
  display: flex;
  flex-direction: column;
}
.container.one .loop--item--product-link {
  height: 100%;
}
.container.one .loop--item--product-link h2 {
  flex: 1;
}

.container.two .title-price {
  background: green;
}
.container.two .desc {
  background: blue;
}
.container.two ul li a {
  background: lightgreen;
}
.container.two ul li a h2, .container.two ul li a p {
  background: pink;
}
.container.two ul li a span {
  background: lightblue;
}

.container.two .loop--item--product-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.container.two .loop--item--product-link div.title-price {
  padding: 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.container.two .loop--item--product-link div.title-price h2 {
  flex: 1;
}
.container.two .loop--item--product-link div.desc {
  padding: 10px;
}

<h1 style="text-align:center;">Equal height: Title, Price, Description</h1>

<!-- Container ONE -->
<div class="container one">
  <h1>Content in same box</h1>
  <ul class="loop">
    <li class="loop--item">
      <a href="#" class="loop--item--product-link">
        <h2>Overskrift</h2>
        <span>17.000 kr. - 24.000 kr.</span>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
      </a>
    </li>
    <li class="loop--item">
      <a href="#" class="loop--item--product-link">
        <h2>Her er en overskrift som er lidt længere</h2>
        <span>17.000 kr. - 24.000 kr.</span>
        <p>elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
      </a>
    </li>
    <li class="loop--item">
      <a href="#" class="loop--item--product-link">
        <h2>Her er en overskrift </h2>
        <span>17.000 kr. - 24.000 kr.</span>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
      </a>
    </li>
  </ul>
</div>

<!-- Container TWO -->
<div class="container two">
  <h1>Content in two boxes</h1>
  <ul class="loop">
    <li class="loop--item">
      <a href="#" class="loop--item--product-link">
        <div class="title-price">
          <h2>Overskrift</h2>
          <span>17.000 kr. - 24.000 kr.</span>
        </div>
        <div class="desc">
          <p>Lorem ipsum dolor, sit amet consectetit maiores!</p>
        </div>
      </a>
    </li>
    <li class="loop--item">
      <a href="#" class="loop--item--product-link">
        <div class="title-price">
          <h2>Her er en overskrift</h2>
          <span>17.000 kr. - 24.000 kr.</span>
        </div>
        <div class="desc">
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
        </div>
      </a>
    </li>
    <li class="loop--item">
      <a href="#" class="loop--item--product-link">
        <div class="title-price">
          <h2>Her er en overskrift</h2>
          <span>17.000 kr. - 24.000 kr.</span>
        </div>
        <div class="desc">
          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad</p>
        </div>
      </a>
    </li>
  </ul>
</div>

Answer 1

Как говорит Paulie_D, в CSS нет способа сделать это, если элементы не имеют общего родителя.Однако в современных браузерах вы можете сгладить дерево DOM и заставить некоторые элементы исчезать с помощью display: contents.

Одно из возможных решений с использованием этого подхода (избавление от li и a )

* {
  box-sizing: border-box;
}

.container {
  background: tomato;
  padding: 20px;
  max-width: 600px;
  margin: auto;
}

.container:not(:first-of-type) {
  margin-top: 40px;
}

.container ul {
  margin: unset;
  padding: 0;
  list-style-type: none;
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(3, auto);
  grid-gap: 10px;
}

.container ul li,
.container ul li a {
  display: contents;
}

.container ul li h2 {
  margin: 0;
}

.container.one ul li a h2 {
  grid-row: 1;
  background: pink;
}

.container.one ul li a p {
  grid-row: 3;
  background: pink;
}

.container.one ul li a span {
  grid-row: 2;
  background: lightblue;
}

<h1 style="text-align:center;">Equal height: Title, Price, Description</h1>

<!-- Container ONE -->
<div class="container one">
  <h1>Content in same box</h1>
  <ul class="loop">
    <li class="loop--item">
      <a href="#" class="loop--item--product-link">
        <h2>Overskrift</h2>
        <span>17.000 kr. - 24.000 kr.</span>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
      </a>
    </li>
    <li class="loop--item">
      <a href="#" class="loop--item--product-link">
        <h2>Her er en overskrift som er lidt længere</h2>
        <span>17.000 kr. - 24.000 kr.</span>
        <p>elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
      </a>
    </li>
    <li class="loop--item">
      <a href="#" class="loop--item--product-link">
        <h2>Her er en overskrift </h2>
        <span>17.000 kr. - 24.000 kr.</span>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo repellat inventore aspernatur ad quia fugiat facere rerum sapiente odit maiores!</p>
      </a>
    </li>
  </ul>
</div>