image positioning / div height with display flex

_x000D_ _x000D_ I like the positioning of the two box class div's with justify-content: flex-end but I'd like to center the top img-container div vertically in the remaining space above but I'm not sure if this is possible, preferably without javascript. The layout is for portrait orientation mobile devices. Maybe justifying the content isn't the best approach but I'd like a layout that places the form elements towards the bottom of the screen and spaces them well but responds to smaller devices by taking space from the logo area. _x000D_ _x000D_ .flexcontainer {_x000D_ display: -webkit-flex;_x000D_ display: flex;_x000D_ -webkit-flex-direction: column;_x000D_ flex-direction: column; _x000D_ -webkit-align-items: center;_x000D_ align-items: center;_x000D_ -webkit-justify-content: flex-end;_x000D_ justify-content: flex-end;_x000D_ _x000D_ /*iPhone 4*/_x000D_ height: 480px;_x000D_ width:320px;_x000D_ /*iPhone 6*/_x000D_ /*height: 667px;_x000D_ width:375px;*/_x000D_ _x000D_ background-color: blue;_x000D_ border: 1px solid red;_x000D_ }_x000D_ _x000D_ .box {_x000D_ text-align:center;_x000D_ height: auto;_x000D_ width: 100%;_x000D_ background-color: green;_x000D_ border: 1px solid pink;_x000D_ margin: 3px;_x000D_ padding-top:20px;_x000D_ padding-bottom:20px;_x000D_ margin-top:20px;_x000D_ margin-bottom:20px;_x000D_ }_x000D_ _x000D_ .img-container{_x000D_ text-align:center;_x000D_ }_x000D_ _x000D_ _x000D_