align-self: flex-end not moving item to bottom [duplicate]

Question

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;  }

<div class="flexbox">      <div class="item">      <div class="title">        Title      </div>      <div class="content">        Content      </div>      <div class="author">        Author      </div>    </div>      <div class="item">      <div class="title">        Title      </div>      <div class="content">        Content<br>Content      </div>      <div class="author">        Author      </div>    </div>      <div class="item">      <div class="title">        Title      </div>      <div class="content">        Content<br>Content<br>Content      </div>      <div class="author">        Author      </div>    </div>    </div>

Answer 1

Try add to .author

margin-top: auto; 

You also need to remove flex-end.