CODEWITHSUNDEEP
htmlcssflexbox
fefe
fefe

Reputation: 9065

Equal height columns and align last item to bottom

I have a list where each li has nested containers. I try to preserve the same height for all list items and push to the bottom the last div. How would I do this using 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>

and here is a codepen all what I was trying

Upvotes: 3

Views: 1346

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 372059

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>

References:

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

Upvotes: 2

Related Questions