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://i.stack.imgur.com/qqmU4.jpg

Chrome 88 https://i.stack.imgur.com/APAEg.jpg

Ross Fine · Answer 1 · 2021-03-17T15:51:19.867

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;

edited Mar 17 '21 at 15:51

answered Mar 17 '21 at 15:38

Ross Fine

181
2
8

2

[The difference between `flex: 1` and `flex-grow: 1`](https://stackoverflow.com/q/45767405/3597276) – Michael Benjamin Mar 17 '21 at 16:33
Worked for me, though I had to set flex-shrink: 0 to a neighbouring div to prevent the container from taking up too much space. – Gottfried Apr 22 '21 at 15:23

score 0 · Answer 2 · answered Mar 23 '21 at 13:37

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 = '';
    });
  }
}

Flex elements overlapping chrome 89 bug

2 Answers2