I’m surprised no one’s mentioned calc() yet.
I wasn’t able to make-out your specific case from your fiddles, but I understand your problem: you want a height: 100% container that can still use overflow-y: auto.
This doesn’t work out of the box because overflow requires some hard-coded size constraint to know when it ought to start handling overflow. So, if you went with height: 100px, it’d work as expected.
The good news is that calc() can help, but it’s not as simple as height: 100%.
calc() lets you combine arbitrary units of measure.
So, for the situation you describe in the picture you include: 
Since all the elements above and below the pink div are of a known height (let’s say, 200px in total height), you can use calc to determine the height of ole pinky:
height: calc(100vh - 200px);
or, ‘height is 100% of the view height minus 200px.’
Then, overflow-y: auto should work like a charm.