flexbox with sidebar content two column with sidebar containing 'sticky' header / footer?

Question

So i'm using flexbox grid and have a basic something like this:

<div class="container">
    <div class="row">
        <div class="sidebar col-xs-3">
            <div class="sidebar-top"></div>
            <div class="sidebar-space"></div>
            <div class="sidebar-bottom"></div>
        </div>
        <div class="content col-xs-9">
            <div class="post"></div>
            <div class="post"></div>
            <div class="post"></div>
            <div class="post"></div>
        </div>
    </div>
</div>

And generally looks something like this:

Now I need the top green bar to follow down when the scroll and the bottom green bar to stick to the bottom of the visible page. The center place that says hey, may or may not ever have content in it.

I have tried quite a few things, mostly taken from the css-tricks site about flex and other various blog posts, but none seems to satisfy what I need. If I add a wrapper around the sidebar-top/space/bottom and set it to a column instead of row it no longer gets the equal height that .sidebar and .content have. Nothing seems to work.

Is this even possible with pure css?

edit: The relevant css classes container row and col-xs-X are all from flexbox grid linked at top of question