STR: 0. Set about:config pref devtools.flexboxinspector.enabled = true 1. Load attached testcase. 2. Right click the text and choose "Inspect Element". 3. Click the "Layout" button on the upper-right area of the devtools pane. ACTUAL RESULTS: The flex item label, i.e. > div.really-long-class-name-here-wow-this-is-such-a-long-classname-check-it-out ...overflows off the right side of the pane and causes scrollbars. (And if you scroll over, you can see that the title area, line separators, etc. don't continue into the overflow area.) EXPECTED RESULTS: The label (as arbitrary unpredictable-in-length content) should probably be clamped to some upper-bound size & should be ellipsized rather than overflowing. (pbro initlaly brought this up on slack -- filing a bug to be sure it's tracked.)

Fixes the 3 places where long element Reps can appear: - as a accordion header as "flex item of div..." - as a flex item in the list of items for a container - as a flex container To fix this, I added text-overflow:ellipsis in a few places and made sure the Rep was not pushing other things too far behind the viewport. I also made the layout sidebar overflow-x:hidden, because it doesn't need to scroll sideways (if the sidebar is too thin, then the box-model diagram might overflow, but it has its own horizontal scrollbar). Finally, I removed the inspector select icon next to the Flex Container Rep because usually the element is already selected anyway. If it's not, then you can use the back arrow to go back to the container.

Pushed by pbrosset@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/ed70a55e2721 Avoid overflowing the layout tab when flex elements are long; r=rcaliman