css - Can't get element vertical aligned using flexbox -

i've spent couple of hours trying text within flex elements vertical aligned no luck. feels i'm missing important here!

html

<div class="flex-container">     <div class="flex-item">         test     </div>                                          <div class="flex-item">         test                                        </div>                                    </div> 

css

.flex-container {     height:100%;     display: flex;     flex-direction: column;     flex-wrap: nowrap;     justify-content: center;     align-content: stretch;     align-items: stretch;  }  .flex-item {     flex: 1 auto; } 

display:flex isn't inherited, need apply flex-items too...the use align-items center text vertically.

html,  body {    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;    height: 100%;    margin: 0;    padding: 0;  }  .flex-container {    height: 100%;    display: flex;    flex-direction: column;    flex-wrap: nowrap;    justify-content: center;    align-content: stretch;    align-items: stretch;  }  .flex-item {    flex: 1 auto;    display: flex;    align-items: center; /* center vertically */    justify-content:center; /* center horzontally */    border: 1px solid grey  }

<div class="flex-container">    <div class="flex-item">      test    </div>    <div class="flex-item">      test    </div>  </div>