Flexbox 列中的等高部分？

Question

我使用 Flexbox 列进行非常基本的布局。下面有标题、图像和列表。列表必须有边框并且可以有不同的内容。是否可以在没有 JavaScript 的情况下使这些列表部分基于最大的高度相等？或者需要用JS计算出最大截面高度并应用到其他地方？

这就是我要的：

这就是我所拥有的：

.columns {
  display: flex;
}

.col {
  margin-left: 20px;
}

ul {
  margin: 0; 
}

.list {
  padding: 24px;
  border: 1px solid blue;
}

<div class="columns">

  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
  
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>

</div>

Answer 1

由于两列都位于同一个 Flex 容器内，因此，仅使用 CSS 即可使列表框具有相同的高度（基于最高的内容）。

.columns {
  display: flex;
}

.col {  
  display: flex;          /* new */
  flex-direction: column; /* new */
  margin-left: 20px;
}

.list {
  flex: 1;                /* new */
  padding: 24px;
  border: 1px solid blue;
}

ul {
  margin: 0;
}

<div class="columns">
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
</div>

这里还有几个例子：

jsFiddle 演示

.columns {
  display: flex;
}

.col {
  display: flex;           /* new */
  flex-direction: column;  /* new */
  margin-left: 20px;
}

.list {
  flex: 1;                 /* new */
  padding: 24px;
  border: 1px solid blue;
}

ul {
  margin: 0;
}

<div class="columns">
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
</div>

<br>

<div class="columns">
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
</div>

<br>

<div class="columns">
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>        
      </ul>
    </div>
  </div>
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
</div>