Flex elements overlapping chrome 89 bug

Question

My items in the list are overlapping in the newest version of Chrome 89

I'm using flex-direction: column-reverse; for the list itself.

Any ideas how to solve it?

Chrome 89 https://imgur.com/7RNcdYU

Chrome 88 https://imgur.com/cI2Pex3

Answer 1

I ended up just exchanging flex: 1 with flex-grow: 1 from the container and it solved the problem.

Not sure if this is a long term solution, but this time it helped

display: flex;
// flex: 1;
flex-grow: 1;
overflow-y: scroll;
flex-direction: column-reverse;

Answer 2

I had the same issue, when new elements are added to the container, the elements overlaps and create random paddings between them. I tested it in Firefox and Firefox works well.

Trying some solutions, I found the list renders again without overlapping when the container width is changed (I don't know internal chromium render, so I can't ensure if this "trigger" some internal re-render).

I managed to "patch" with JavaScript while Chromium/Chrome team fix's this bug, just removing one pixel from the element width and adding it in the next render cycle.

Disclaimer: This is an ugly patch just to make your users in production not cry when you find a real solution.

// Run this when you add new elements to the flex container
function fixChrome89Bug() {
  if (!window.navigator || !window.navigator.userAgent) return;

  if (window.navigator.userAgent.indexOf('Chrome/89') !== -1) {
    const element = document.querySelector('your element reference');
    element.style.width = `${element.offsetWidth - 1}px`;
    window.requestAnimationFrame(function () {
      element.style.width = '';
    });
  }
}