html - Cluster child elements at bottom of div with flexbox -

using flexbox, want child elements of div sit @ bottom, first element full width , remaining flexing size/position. when try this, however, first element sits in middle rather @ bottom. fiddle here.

.container {    display: flex;    flex-wrap: wrap;    height: 300px;    align-items: flex-end;    box-sizing: border-box;    border: 1px solid green;  }    .full-child {    width: 100%;    height: 30px;    box-sizing: border-box;    border: 1px solid blue;  }    .partial-child {    height: 30px;    box-sizing: border-box;    border: 1px solid red;  }    .partial-child.one {    flex-grow: 1;  }

<div class="container">    <div class="full-child">a</div>    <div class="partial-child one">b</div>    <div class="partial-child two">c</div>    <div class="partial-child three">d</div>  </div>

note in screenshot below how blue div sits in middle, rather snug against red elements @ bottom.

how can desired behavior, elements cluster @ bottom of div?

do

 align-content: flex-end; 

that impact positioning on opposite axis.

.container {    display: flex;    flex-flow: row;    flex-wrap: wrap;    height: 300px;    align-content: flex-end;    box-sizing: border-box;    border: 1px solid green;  }    .full-child {    width: 100%;    height: 30px;    box-sizing: border-box;    border: 1px solid blue;  }    .partial-child {    height: 30px;    box-sizing: border-box;    border: 1px solid red;  }    .partial-child.one {    flex-grow: 1;  }

<div class="container">    <div class="full-child">a</div>    <div class="partial-child one">b</div>    <div class="partial-child two">c</div>    <div class="partial-child three">d</div>  </div>