How can I vertically align a flex item?

Question

I trying to have item one in the center and item two at the bottom of the page no matter the viewport height. Does anyone know how to do this?

<div class="container">
  <div class="item item-1">Item One</div>
  <div class="item item-2">Item Two</div>
</div>

* {
  box-sizing: border-box;
}

body {
  padding: 20px;
}

.container {  
  border: 5px solid rgb(111,41,97);
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: 60vh;
  justify-content: center;
  align-items: center;
}

.item {
  padding: 10px;
  background-color: rgba(111,41,97,.3);
  border: 2px solid rgba(111,41,97,.5);
  width: 50%;
}