html - 等高列并将最后一项与底部对齐

Question

我有一个列表，其中每个 li 都有嵌套的容器。我尝试为所有列表项保留相同的高度，并将最后一个 div 推到底部。我将如何使用 flex 做到这一点？

ul.list-container {
  display: inline-flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.list-container > li {
  flex-grow: 1;
  min-width: 200px;
  background-color: #e3e3e3;
  height: 100%;
  width: 100%;
} 

ul.list-container > li > .pus-me-to-the-bottom {
  
  color: red;
  margin-top: 10px;

  // this should expand to the bottom
}

<ul class="list-container">
  <li>
    <div class="title">title</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>

   <li>
    <div class="title">
Audiam inciderint intellegebat ne est, cu pri quidam deseruisse persequeris, consetetur elaboraret duo at. Sed quod veniam disputando in. An nam ferri tollit, ea quod doming facete nam. Eum omittam periculis te, ad pri viris tempor.</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>
  
   <li>
    <div class="title">title</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>
  
   <li>
    <div class="title">title</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>

</ul>

这是一个 codepen我正在尝试的一切

Answer 1

ul.list-container {
  display: inline-flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
ul.list-container > li {
  display: flex;             /* new; nested flex container */
  flex-direction: column;    /* new; stack flex items vertically */
  flex-grow: 1;
  min-width: 200px;
  background-color: #e3e3e3;
  /* height: 100%;           <-- remove to enable equal height columns; see reference #1 */
  width: 100%;
  border: 1px solid red;
}
ul.list-container > li > .pus-me-to-the-bottom {
  margin-top: auto;          /* new; see reference #2 */
  color: red;
  /* margin-top: 10px;       <-- remove */
  border: 1px solid black;
}

<ul class="list-container">
  <li>
    <div class="title">title</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>
  <li>
    <div class="title">
      Audiam inciderint intellegebat ne est, cu pri quidam deseruisse persequeris, consetetur elaboraret duo at. Sed quod veniam disputando in. An nam ferri tollit, ea quod doming facete nam. Eum omittam periculis te, ad pri viris tempor.</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>
  <li>
    <div class="title">title</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>
  <li>
    <div class="title">title</div>
    <div class="pus-me-to-the-bottom">title</div>
  </li>
</ul>

引用资料:

1. Equal Height Columns with Flexbox
2. Methods for Aligning Flex Items