css - 使用 FlexBox 等高（下一级）

Question

我想在一列内创建等高的项目。当我只有标题和价格时，这很容易。我可以灵活地增加标题，并且我的身高相同。

问题是当我也有描述时。
Title
Price
Desc

有两个例子，因为我都试过了。
一个示例将所有内容都包含在一个项目中，另一个示例将内容拆分为两个项目。

我有一个等高的 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

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>