Our devtools flexbox highlighter doesn't support fragmented flex containers right now (i.e. it'll highlight them incorrectly, if you have a flex container that's split across the columns of a multi-column element).

This hasn't been much of an issue because flex containers mostly didn't usefully fragment (specifically, their descendants wouldn't fragment); but as of bug 1622935, TYLin's fixing that for some major cases (and we'll be fixing other cases in bug 939897).

So: we need to morph the getAsFlexContainer() DevTools API to instead be getFlexFragments() (like our existing getGridFragments() API for grid containers).

STR with testcase 1 (to demonstrate the issue):
(1) Load https://bugzilla.mozilla.org/attachment.cgi?id=9145604
(2) Inspect one of the lightgray areas.
(3) Activate flex devtools for either of the flex containers (e.g. by clicking the "flex" badge in the DOM view)

EXPECTED RESULTS:
Both columns (left side and right side) should be highlighted (with the outline & hatching) as part of the flex container.

ACTUAL RESULTS:
Only the first column is highlighted.

(Once bug 1622935 has landed, we'll be able to test this with more interesting testcases, with flex items placed in each column & split across columns.)

Cool! Thanks for bringing this to our attention. We'll work on an API redesign so we can support this better in devtools.