Align an element to bottom with flexbox

Question

I have a div with some children:

  
heading 1
  
heading 2
  
Some         


        
      

Answer 1

When setting your display to flex, you could simply use the flex property to mark which content can grow and which content cannot.

Flex property

div.content {
 height: 300px;
 display: flex;
 flex-direction: column;
}

div.up {
  flex: 1;
}

div.down {
  flex: none;
}

  

    
heading 1
    
heading 2
    
Some more or less text
  

  

    Click me