Chrome won't render items when flex-direction: row-reverse || column-reverse with overflow: scr-CodePudding

Looks like I've discovered a chrome bug.

Working demo is

To reproduce the issue create <div/> with overflow: scroll and flex-direction: row-reverse or column-reverse as a container and fill it with any type of items. Full code is here

Does anyone know how to workaround the issue?

CodePudding user response：

I found two workarounds.

Workaround 1

The simplest workaround is to add content-visibility: auto; to the item class:

.item {
  /* other styles */
  content-visibility: auto;
}

This article covers this property in details and has a great video demo in the example section.

This workaround solved the issue but resulted in really janky scrolling behavior. You might solve it with contain-intrinsic-size property. The same article covers it in this section. Here's a quote:

In order to realize the potential benefits of content-visibility, the browser needs to apply size containment to ensure that the rendering results of contents do not affect the size of the element in any way. This means that the element will lay out as if it was empty. If the element does not have a height specified in a regular block layout, then it will be of 0 height.

This might not be ideal, since the size of the scrollbar will shift, being reliant on each story having a non-zero height.

Thankfully, CSS provides another property, contain-intrinsic-size, which effectively specifies the natural size of the element if the element is affected by size containment.

Workaround 2

I ended up replacing the column-reverse behavior with just column and then scrolling to the bottom of the list with element.scrollIntoView.

Here's the code I used for that (React): https://stackoverflow.com/a/52266212/4745802

CodePudding user response：

To work around the problem make the parent of the flex container also a flex container with flex-direction: column.

The problem seems to go away when the primary flex container is also a flex item.