html - align-self: flex-end not moving item to bottom

As you can see here: JSFiddle

I want author div to be at the bottom of his parent container. I tried with align-self: flex-end; but it's not working. What am I doing wrong?

.flexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}


.item {
  display: flex;
  flex-direction: column;
  width: 100px;
  border: 1px solid #000;
  padding: 10px;
}

.item .author {

  width: 100%;
  align-self: flex-end;
  border: 1px solid #000;
}

  

    

      Title
    

    

      Content
    
    

      Author
    
  

  

    


      Title
    
    

      Content
Content
    
    

      Author
    
  


  

    

      Title
    
    

      Content
Content
Content
    
    

      Author
    

  

Answer

Try add to .author

margin-top: auto;

You also need to remove flex-end.