[8.1.25] Tall containers in scrollable parent container do not render borders for entire height

I have 2 flex column containers side by side inside a flex row container. The two column containers are tall, and require vertical scrolling to be able to access all the information on them.

I have set a border on the right side of the left inner container, but it only renders the border for the height of the viewport at launch, and scrolling down in the container at runtime reveals the border does not render for the full length of the container height.

View at launch

View after scrolling

Parent Container Config

borderissue2

Child Container Config

I can confirm that this happens on 8.1.36 with a mockup of your setup - currently trying to figure out why...

So, I found a SO post that kinda addresses the same issue, and I think a resolution is to add

height: max-content;

to your Child Container.

2 Likes

Adding this did it, good find.

2 Likes