0

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>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Keviin Cosmos
  • 177
  • 14
  • 3
    You can't....there is **NO** CSS mechanism to equalise heights of elements that do *not share a parent*. You will need Javascript. – Paulie_D Dec 19 '18 at 11:22
  • That's sad... So when it's more than two items i have to use JS... The jQuery script that i have is pretty long. Do you have a nice js script you can share? – Keviin Cosmos Dec 19 '18 at 11:35
  • 2
    If you want to improve an existing script *that's a separate question*. I'd suggest that it *might* be better placed on CodeReview.SE though...but check their guidelines first. – Paulie_D Dec 19 '18 at 11:37
  • 1
    Here - https://stackoverflow.com/questions/46596170/how-to-get-header-from-cards-or-similar-to-have-the-same-height-with-flex-box/46600682#46600682 – Paulie_D Dec 19 '18 at 12:51
  • @Paulie_D But you can make the li and a kind of disappear, see my answer – vals Dec 19 '18 at 15:44

1 Answers1

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>
vals
  • 61,425
  • 11
  • 89
  • 138