align-self on child vertically not working on a display flex column parent?

Question

i am new to flex and i have 2 child, 1 i want to center and 1 on bottom:

<div className="parent">
  <div className="main">center me</div>
  <div className="footer">put me on bottom</div>
<div>

this is my style:

.parent { 
  width:100%;
  display:flex
  flex-direction:column;
  height:100vh;
}
.main {
  align-self: center;
}
.footer {
  align-self: flex-end;
}

the classes main and footer is not working as i expected? help?