Google Chrome viewport-anchored expand direction with flexbox

Question

There is an issue in Google Chrome where elements expand/collapse in different directions relative to the viewport when placed inside a flexbox container with an adjacen

Answer 1

Add this code to your flex container:

• overflow-anchor: none

This will disable a feature in Chrome known as "scroll anchoring", which is causing the upward expansion of boxes (revised codepen).

---

In Chrome, the upward / downward direction of expanding boxes is governed by the scroll position in the viewport, not the layout itself.

Chrome takes a unique approach to this behavior for the purpose of improving the user experience.

Basically, they bind a DOM element to the current scroll position. The movement of this particular ("anchor") element on the screen will determine an adjustment, if any, to the scroll position.

They call this approach "Scroll Anchoring". The algorithm is explained on this page: https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md

This behavior is currently unique to Chrome, but Google is pushing for standardization.

In accordance with the Scroll Anchoring documentation, applying overflow-anchor: none to the appropriate element(s) will disable scroll anchoring adjustments.

More information:

• https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md
• https://bugs.chromium.org/p/chromium/issues/detail?id=739860
• https://hacks.mozilla.org/2019/03/scroll-anchoring-in-firefox-66/
• Changing CSS flex order causes scrolling