如何垂直对齐弹性项目？

Question

无论视口高度如何，我都试图在页面的中心放置第一项，在页面的底部放置第二项。有谁知道该怎么做？

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