Shadow + overflow-y-auto

[mnabialek]

I encounterned this problem when using TailwindUI on bottom of page with select menu but below code shows the problem:

<div style="height: 100px;" class="overflow-y-auto bg-gray-100">
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />
    text<br />

    <div class="shadow">
        sample text
    </div>
</div>

When sample text is at the end of outer div, then bottom shadow is not displayed. In this case it's possible to display shadow adding pb-64 to outer div (it seems much smaller padding bottom doesn't make any difference) but obviously it's not the solution - it's increases height of div, and if much more text were added it won't be enough to display the shadow again.

Is there any good solution to make shadow displayble without adding any padding to outer div no matter how much text there is put before?