css - 强制两个 元素具有相同的高度

Question

我有两个 <li>具有不同内容(不同长度的文本)的元素，但出于设计原因，它们应该具有相同的高度。另外，它们的宽度是相对的，所以我不知道总高度。有没有办法设置 <li> 的高度最大的元素<li>使用 CSS？

Jsfiddle:see here

* {
  box-sizing: border-box;
}

ul {
  display: inline-block;
  padding: 0;
  width: 100%;
  border: 1px solid red;
}

li {
  list-style-type: none;
  margin: 0;
  padding: 1em;
  float: left;
  display: inline-block;
  width: 35%;
  margin-right: 50px;
  border: 1px solid #888;
}

<ul>
  <li>
    <h2>caption 1</h2>
    <p>.</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
  </li>
  <li>
    <h2>caption 2</h2>
    <p>...</p>
  </li>
</ul>

Answer 1

我认为最简单的方法是使用 flexbox。

ul {
  display: flex;
}

* {
  box-sizing: border-box;
}

ul {
  padding: 0;
  border: 1px solid red;
  display: flex;
}

li {
  list-style-type: none;
  margin: 0;
  padding: 1em;
  width: 35%;
  margin-right: 50px;
  border: 1px solid #888;
}

<ul>
  <li>
    <h2>caption 1</h2>
    <p>.</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
    <p>.</p>
  </li>
  <li>
    <h2>caption 2</h2>
    <p>...</p>
  </li>
</ul>