"align-items: flex-start" aligns children along parent's available space [duplicate] - css

Question

This question already has answers here:
How does flex-wrap work with align-self, align-items and align-content?
(2 answers)
Closed 5 years ago.
I am trying to align each child DIRECTLY after one another (vertically). Apparently align-items: flex-start doesn't do that completely because there is some auto-spacing between each child.
Below is a snippet of the result I get. The children align themselves along their parent's available space, which is not what I like to achieve. What I want is each child to align directly after its previous sibling (vertically, as in the snippet).
Thanks in advance!
EDIT: flex-flow: column wrap and align-content: flex-start both did the trick. I forgot, however, to add align-self: flex-end to the last child, which doesn't work when either of the two solutions above is applied.
* {
box-sizing: border-box;
}
#container {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
align-items: flex-start;
flex-flow: row wrap;
}
#container > div {
width: 100%;
margin: 10px;
border: 2px solid #ff0000;
}
#container > div:nth-child(1) { height: 5%; }
#container > div:nth-child(2) { height: 10%; }
#container > div:nth-child(3) { height: 20%; align-self: flex-end; }
<div id="container">
<div></div>
<div></div>
<div></div>
</div>

Answer 1

You need to set align-content: flex-start on parent element because initial value is stretch.
stretch
If the combined size of the items along the cross axis is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the cross axis.
* {
box-sizing: border-box;
}
#container {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
align-items: flex-start;
flex-flow: row wrap;
align-content: flex-start;
}
#container > div {
width: 100%;
margin: 10px;
border: 2px solid #ff0000;
}
#container > div:nth-child(1) { height: 5%; }
#container > div:nth-child(2) { height: 10%; }
#container > div:nth-child(3) { height: 20%; }
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
Update: Another solution is to set flex-direction: column then you can use margin to position specific flex item.
* {
box-sizing: border-box;
}
#container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
}
#container > div {
width: calc(100% - 20px);
margin: 10px;
border: 2px solid #ff0000;
}
#container > div:nth-child(1) {
height: 5%;
}
#container > div:nth-child(2) {
height: 10%;
}
#container > div:nth-child(3) {
height: 20%;
margin-top: auto;
}
<div id="container">
<div></div>
<div></div>
<div></div>
</div>

Answer 2

You need to set column for the flow
#container {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
align-items: flex-start;
flex-flow: column wrap;
}
#container > div:nth-child(3) { height: 20%; margin-top: auto; }
Updated:
Add margin top auto to the last child
https://jsfiddle.net/qghsgze5/2/