Equal Height with FlexBox (next level) - html

Question

I want to create equal height items inside a column. It's easy when i only have the title and price. The i can just flex grow the title, and i go my equal height.
The issue is when i also have a description.
Title
Price
Desc
There are two example, because i've tried both.
One example with all content inside one item, and the another example where the content is splittet into two item.
I've a equal height jQuery script, but want to use Flex if possible.
There's colors on all elements to see if the have equal heights.
I've my code on codepen, but i'll paste it in here also.
* {
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

As Paulie_D says, there is no way in the CSS to do it unless the elements share a parent.
In modern browsers, however, you can flatten your DOM tree, and make some elements disappear using display: contents.
One posible solution using this approach (getting rid of li and 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>