When inspecting an element in Chrome Devtools, what does the blue arrow signify?

Question

Anyone who is an "expert" at Chrome Devtools should be able to explain what does the blue arrow signify?

Here is a similar question that has been unanswered about what the hash means.

Rosaleerosaleen

The arrow shows if the item grew or shrank. – Goltz

From flex? What would cause an element to shrink? – Rosaleerosaleen

Please add MCVE. – Goltz

Answer 1

Pretty often the next html element is too wide, so it pushes left the element in the left side. You may want to try to change the container div size or decrease the width of the element on the left.

Genuflect

Answer 2

The flexbox layout comprises a parent element with display: flex; property and child flex items.

Flex items in many layouts might combine the automatic flexibility of flexbox with the manual size settings: flex-none, flex-basis,width, height, max-width, max-height etc.

When you hover over the element in the Elements panel the flexbox layout is visualized. The dotted lines essentially represent the difference between the actual and potential size and position of items within the flex element.

The arrow appears if e. g. there is a conflict between the potential item size in the flexbox layout and its actual size. This might be the case if

• there is not enough room for the item to take its full size or
• its size is set manually.

MDN Docs on flex-basis property and this answer both provide a good explanation.

Furor