为什么在没有做任何事情之间存在合理的内容空间？

我正试图通过使用使得top-nav和bot-nav分区垂直分开justify-content: space-between.但是,它没有做任何事情.有人能指出我做错了吗？

@import url(https://fonts.googleapis.com/css?family=Rock+Salt);
 html {
  font-family: 'Rock Salt', cursive;
}
.flex-container {
  display: flex;
}
header {
  width: 300px;
  height: 100vh;
  position: fixed;
  background-color: blue;
}
nav.flex-container {
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
}
ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
#logo-container {
  background-color: red;
  width: 100%;
}
#logo {
  margin: auto;
  padding: 10px 0;
}

  

    

      

        
Name Goes Here
      
      
    
  

nav.flex-container {
    height: 80%; /*your value*/
}

header {
    display: flex;
    flex-direction: column;
}
nav.flex-container {
    flex: 1;
}