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](http://jsbin.com/zomemonipi/edit?html,css,output).

```css
.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;
}
```

```html
<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.

[![Example of failure](https://i.stack.imgur.com/m2aAD.png)](https://i.stack.imgur.com/m2aAD.png)

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