'Vue3 scrollable container not rendering border outside of view

I am working with Laravel & Vue3. I have the following in one of my templates:

<div class="-ml-[24px] md:-ml-[24px] -mr-[28px] md:-mr-[24px] pr-2 md:pr-0">
    <div class="px-6 custom-scrollbar overflow-x-hidden overflow-y-auto">
        <ol class="ml-4 w-full max-h-[calc(100vh-330px)] border-l-2 border-gray-400 ml-3 lg:ml-0">
            <AlarmEventResponseListItem
                v-for="(response, index) in infiniteScroll.context.items"
                :key="response.id"
                :next-alarm-event-response="infiniteScroll.context?.items?.[index + 1]"
                :initial-alarm-event="initialEvent"
                :alarm-event-response="response"
                :loading="loading !== undefined && loading === response.id"
                @delete="handleDeleteItem"
                @edit="handleEditItem"
            />
            <li class="pt-0.5" :ref="handleLastItem"></li>
        </ol>
    </div>
</div>

This component renders a scrollable list in a container with its height calculated to the remaining visible height from the fixed items on the page. All works as expected except the border-l-2 on the ol.

Why is the left hand side border not rendering for li items that are off the page (per images):

enter image description here

enter image description here

htmlcsstailwind-css


Solution 1:[1]

Turned out I was setting the height to the ol instead of its parent container...

<div class="px-6 custom-scrollbar overflow-x-hidden overflow-y-auto">
    <ol class="ml-4 w-full max-h-[calc(100vh-330px)] border-l-2 border-gray-400 ml-3 lg:ml-0">

changed to this:

<div class="px-6 max-h-[calc(100vh-330px)] custom-scrollbar overflow-x-hidden overflow-y-auto">
    <ol class="ml-4 w-full border-l-2 border-gray-400 ml-3 lg:ml-0">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 TheRealPapa

Related Questions