Flexbox justify-content not working with flex-flow column

Question

I have a simple flexbox grid with 3 columns.

Each column has a different amount of content. The link should always be at the bottom of each column.

I assumed by changing the flex-direction and justify-content would solve the issue, but it hasn't worked.

/* Switches on flexbox */
.grid,
.content {
  display: flex;
}

/* Makes each column equal */
.col {
  flex: 1;
  margin: 12px;
  padding: 12px;
  background: #eaeaea;
}

.content {
  flex-direction: column; /* Changes flex direction from row to column */
  justify-content: space-between; /* I'm expecting this to position <h2>, <p> and <a> */
}

<div class="grid">
  
  <div class="col">
    
    <div class="content">
      <h2>Item One</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan dui eu ligula sodales dignissim. Vivamus tristique tellus porttitor, pulvinar nulla quis, pretium elit.</p>
      <a href="#">Link</a>
    </div><!-- .content -->
    
  </div><!-- .col -->
 
 <div class="col">
    
    <div class="content">
      <h2>Item Two</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan dui eu ligula sodales dignissim. Vivamus tristique tellus porttitor, pulvinar nulla quis, pretium elit. Etiam ac hendrerit mi. Aliquam sagittis metus urna. Nulla venenatis porttitor elit, at scelerisque lorem semper eu. Nullam fringilla, mauris a commodo dignissim, tortor neque maximus ante, et consectetur nunc nibh non erat. Donec scelerisque tortor sed mi ornare laoreet. Fusce eget tristique neque, quis condimentum augue. Nulla feugiat molestie nunc, a imperdiet eros. Vivamus at justo nec ligula imperdiet placerat in non erat. Nam vitae rutrum massa. Proin condimentum id metus quis aliquam. Aliquam a tortor velit. Pellentesque aliquet, est a tincidunt imperdiet, nunc nisi aliquam urna, ac auctor mauris massa et nibh.</p>
      <a href="#">Link</a>
    </div><!-- .content -->
    
  </div><!-- .col -->
  
  <div class="col">
  
    <div class="content">
      <h2>Item Three</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan dui eu ligula sodales dignissim. Vivamus tristique tellus porttitor, pulvinar nulla quis, pretium elit. Etiam ac hendrerit mi. Aliquam sagittis metus urna. Nulla venenatis porttitor elit, at scelerisque lorem semper eu. Nullam fringilla, mauris a commodo dignissim, tortor neque maximus ante, et consectetur nunc nibh non erat. Donec scelerisque tortor sed mi ornare laoreet. Fusce eget tristique neque, quis condimentum augue. Nulla feugiat molestie nunc, a imperdiet eros. Vivamus at justo nec ligula imperdiet placerat in non erat. Nam vitae rutrum massa. Proin condimentum id metus quis aliquam. Aliquam a tortor velit. Pellentesque aliquet, est a tincidunt imperdiet, nunc nisi aliquam urna, ac auctor mauris massa et nibh.</p>
      <a href="#">Link</a>
    </div><!-- .content -->
    
  </div><!-- .col -->
  
</div><!-- .grid -->

It works with flex-direction: row;

/* Switches on flexbox */
.grid,
.content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<div class="grid">
  
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  
</div><!-- .grid -->

Answer 1

You haven't set a height on your containers. Therefore, your layout falls back to the default height, which is content-based (height: auto), and there's no extra space for justify-content to work.

Add this to your code:

.grid,
.content {
  display: flex;
  height: 100vh; /* new */
}

/* Switches on flexbox */
.grid,
.content {
  display: flex;
  height: 100vh; /* new */
}

/* Makes each column equal */
.col {
  flex: 1;
  margin: 12px;
  padding: 12px;
  background: #eaeaea;
  overflow: auto; /* demo */
}

.content {
  flex-direction: column; /* Changes flex direction from row to column */
  justify-content: space-between; /* I'm expecting this to position <h2>, <p> and <a> */
}

<div class="grid">
  
  <div class="col">
    
    <div class="content">
      <h2>Item One</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan dui eu ligula sodales dignissim. Vivamus tristique tellus porttitor, pulvinar nulla quis, pretium elit.</p>
      <a href="#">Link</a>
    </div><!-- .content -->
    
  </div><!-- .col -->
 
 <div class="col">
    
    <div class="content">
      <h2>Item Two</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan dui eu ligula sodales dignissim. Vivamus tristique tellus porttitor, pulvinar nulla quis, pretium elit. Etiam ac hendrerit mi. Aliquam sagittis metus urna. Nulla venenatis porttitor elit, at scelerisque lorem semper eu. Nullam fringilla, mauris a commodo dignissim, tortor neque maximus ante, et consectetur nunc nibh non erat. Donec scelerisque tortor sed mi ornare laoreet. Fusce eget tristique neque, quis condimentum augue. Nulla feugiat molestie nunc, a imperdiet eros. Vivamus at justo nec ligula imperdiet placerat in non erat. Nam vitae rutrum massa. Proin condimentum id metus quis aliquam. Aliquam a tortor velit. Pellentesque aliquet, est a tincidunt imperdiet, nunc nisi aliquam urna, ac auctor mauris massa et nibh.</p>
      <a href="#">Link</a>
    </div><!-- .content -->
    
  </div><!-- .col -->
  
  <div class="col">
  
    <div class="content">
      <h2>Item Three</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan dui eu ligula sodales dignissim. Vivamus tristique tellus porttitor, pulvinar nulla quis, pretium elit. Etiam ac hendrerit mi. Aliquam sagittis metus urna. Nulla venenatis porttitor elit, at scelerisque lorem semper eu. Nullam fringilla, mauris a commodo dignissim, tortor neque maximus ante, et consectetur nunc nibh non erat. Donec scelerisque tortor sed mi ornare laoreet. Fusce eget tristique neque, quis condimentum augue. Nulla feugiat molestie nunc, a imperdiet eros. Vivamus at justo nec ligula imperdiet placerat in non erat. Nam vitae rutrum massa. Proin condimentum id metus quis aliquam. Aliquam a tortor velit. Pellentesque aliquet, est a tincidunt imperdiet, nunc nisi aliquam urna, ac auctor mauris massa et nibh.</p>
      <a href="#">Link</a>
    </div><!-- .content -->
    
  </div><!-- .col -->
  
</div><!-- .grid -->

More details:

• By default, most elements are the height of their content (height: auto).