Faded text at bottom of div?

Question

This works great: Fading out text at bottom of a section with transparent div, but height stays under section after overlaying div

How can it be expanded upon so it works on a scrollable div?

Applying height: 100px; overflow: auto; causes the .fadeout div to end up at the bottom of the scrollarea.

jsFiddle of what I currently have: http://jsfiddle.net/6k3vV/165/

Answer 1

http://jsfiddle.net/6k3vV/167/

here. Need a parent with relative too

.fadeout {
    bottom: 0;
    height: 4em;
    background: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    position: absolute;
    width: 100%;
} 
section {
    height: 100px;
    overflow: auto;
}