Equal height inner child in flexbox

Question

I'm trying to create a column layout with in each column a title, a piece of text of unequal height and a button. My goal is to let all elements starts on the same height. The struggle is how to achieve this, especially with the last button. Using display: flex, I can create equal-height columns but this does not apply to the inner elements.

I have created a simple structure in this codepen: https://codepen.io/michaaeell/pen/gOxWWGZ. My goal is to let the titles, texts and final sentences start equally, so basically responsive whitespace must be added to column 1 and 2 above the final sentence to ensure it gets on the same height as the final sentence of column 3.

I have tried to achieve it using flex-grow, flex-flow, align-content but they all lead to incorrect results... any help is greatly appreciated!

.container {
  display: flex;
}

.column {
  flex: 1;
  border: 1px solid red;
}

<div class="container">
  <div class="column">
    <h2> Some title </h2>

    <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p>

    <p> Final sentence </p>
  </div>

  <div class="column">
    <h2> Some title </h2>

    <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p>

    <p> Final sentence </p>
  </div>

  <div class="column">
    <h2> Some title </h2>

    <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
      et dolore magna aliqua. Ut enim ad minim veniam </p>

    <p> Final sentence </p>
  </div>
</div>

Does this answer your question? [Align child elements of different blocks](https://stackoverflow.com/questions/56711501/align-child-elements-of-different-blocks) — Rana, Oct 26 '21 at 18:26

score 1 · Accepted Answer · answered Oct 26 '21 at 18:23

Add class .last to last p and then change css to:

.container {
  display: flex;
}

.column {
    flex: 1;
    border: 1px solid red;
    display: flex;
    flex-direction: column;
}

.last {
  margin-top: auto;
}

if you don't want to add class .last to the last p you can use selector:

.column p:last-child

like this:

.column p:last-child {
  margin-top: auto;
}

Fiddle: https://jsfiddle.net/ezgy2s3f/1/

score 1 · Answer 2 · answered Oct 26 '21 at 18:27

You could use flex in flex. In order to have the title and the p grouped together, you could add an additional div.text.

.container {
  display: flex;
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid red;
}

<div class="container">
  <div class="column">
    <div class="text">
        <h2> Some title </h2>
        
        <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p>
    </div>
    <p> Final sentence </p>
  </div>
  
  <div class="column">
      <div class="text">
        <h2> Some title </h2>
        
        <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p>
      </div>
    <p> Final sentence </p>
  </div>
  
  <div class="column">
    <div class="text">
        <h2> Some title </h2>
    
        <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </p>
    </div>
    <p> Final sentence </p>
  </div>
</div>

Equal height inner child in flexbox

2 Answers2