vertical align bottom for a specific child - html

Question

I have a parent element that has 2 children. I want to move 1st child to top, and second one to bottom. The parent element has a scroll and its children size isn't fixed. Children size expands dynamically depending on theirs content
So If theirs size are smaller than parent's one they would look like in the left picture, else they should expand parents div like in the right picture. Usually to move element to edges I'd use absolute position like this:
.parent {
position: relative;
}
.top-child {
position: absolute;
top: 0;
}
.bottom-child {
position: absolute;
bottom: 0;
}
But this case brakes the flow. Parent width and height wouldn't adjust depending by children size. Another solution is to use vertical-align
.parent {
display: table-cell;
vertical-align: bottom;
}
But in this scenario all children would move to bottom.
Here's jsfiddle. Green background is parent. topdiv and bottomdiv and childrens.
How should I CSS divs to attach children to edges without breaking the flow?

Answer 1

you can achieve this use display:table and table-row:
#scroller {
height:300px; /* this height is the min height before you want to scroll */
overflow:auto;
}
.table {
min-height:100%;
width:100%;
display:table;
}
.row {
display:table-row;
}
.row:first-child {
height:100%; /* this is needed to "push" the second row to the bottom (it will actually be 100% minus the bottom row height */
background:blue;
}
.row:last-child {
background:green;
}
<div id="scroller">
<div class="table">
<div class="row">expands to fill space</div>
<div class="row">stays at bottom</div>
</div>
</div>
Example fiddle
Fiddle with content and scrolling
Update
Applying my styles to your fiddle

Answer 2

Something like this?
.main {
width: 300px;
height: 300px;
overflow-y: auto;
border: 1px solid #999;
margin-bottom: 30px;
}
.parent {
min-height: 100%;
display: flex;
flex-direction: column;
}
.child-a {
flex: 1;
background: #ccc;
}
.child-b {
background: #ddd;
}
<div class="main">
<div class="parent">
<div class="child-a">
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
</div>
<div class="child-b">
<p>Amet ipsum dolor</p>
</div>
</div>
</div>
<div class="main">
<div class="parent">
<div class="child-a">
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
</div>
<div class="child-b">
<p>Amet ipsum dolor</p>
</div>
</div>
</div>