Flex item expands when sibling flex item contains float

• Component: CSS
• Status: RESOLVED WORKSFORME

[Brian Armitage]

Found using Chrome 27.0.1453.110 m.

A flex item will continually gain height on resize if:
-its sibling flex item contains a float
-it occurs after its sibling in the source order
-the order of the flex items is changed
-the flex direction of the flex items is changed
-the sibling flex item that contains a float is moved after the flex item

The flex item will also gain height if the above conditions are true and:
-it contains an element with an on-hover box-shadow
-the child element's hover state is activated or deactivated

[Ahmad Saleem]

Wayback Archive Copy - https://web.archive.org/web/20140805095105/https://codepen.io/anon/pen/kgGsq

Changed it to JSFiddle: https://jsfiddle.net/1hf8qd6v/show

> Hover does not seem to have any strange effect even if I change window size using STP189 and it matches Chrome Canary 124.

@Karl & @Sammy - any input, or we should go ahead and close this as 'RESOLVED WONTFIX' (since it was never confirmed).

[Karl Dubost]

Yes it seems to be working on recent versions of Safari.