Cluster child elements at bottom of div with flexbox

Question

Using flexbox, I want the child elements of a div to sit at the bottom, with the first element full width and the remaining flexing into size/position. When I try to do this, however, the first element sits in the middle rather than at the 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 the screenshot below how the blue div sits in the middle, rather than snug up against the red elements at the bottom.

How can I get my desired behavior, where the elements cluster together at the bottom of the div?

Answer 1

Do

 align-content: flex-end;

That will impact the positioning on the 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>