Steps to reproduce the problem

1. Open devtools and find a flexbox item (a child of a flex container) whose flex-basis is something other than auto. The rest of this report assumes LTR writing direction and flex-direction: row.
2. Selecting the item on devtools Elements panel should show a rectangular overlay covered with dotted parallel lines, along with a horizontal arrow starting from the right edge of the rectangle and extending inwards or outwards, depending on if the flex item is shrunk or grown, as a result of flexbox resizings.
3. If I understand correctly, the dotted area represents flex-basis. That is, the size of the element in ideal conditions. Whereas the arrow represents if the flex item has grown or shrunk.
4. On a screen with no zoom, the overlay behaves according to the definition indicated above. Likewise, on a screen that uses the browser's zoom feature (shortcut CMD + or CMD - on macOS), the overlay behaves as expected. However, instead of using the browser's zoom feature, if we zoom using macOS' trackpad gesture zoom (pinch to zoom in), the overlay is broken. That is, if the item is shrunk, the overlay shows as if it has grown.

Problem Description

View the attached screen recording and the relevant HTML file for a clear demonstration. The flexbox overlay should be accurate when zoomed in using macOS' trackpad gesture zoom (pinch to zoom in) as well. Instead, the overlay becomes inaccurate.

Summary

Flexbox grow/shrink overlay is broken when zoomed in using macOS pinch zoom (trackpad gesture)

Additional Data

Category: Developer Tools
Chrome Channel: Stable
Regression: No