[EuiFlexGroup] When `direction="column"` we should set `responsive={false}` or adjust the styling to ignore responsive css

[snide]

When diagnosing https://github.com/elastic/kibana/issues/121403 with @gavinwye we saw lots of EuiFlexGroup components in Security were set to direction="column". Along with the default responsive={true} this can cause items to grow inside containers in weird ways because of the flex-basis moving to 100% for children.

I can't think of an instance where we'd want to apply the flex-basis on the column layout to 100% in mobile. Likely the easiest solution is to make the CSS for the responsive selector to more specific so it doesn't do anything when in a column layout. Another option would be to make responsive={false} in the component itself whenever direction="column". I think I prefer handling this at the CSS level.

https://github.com/elastic/eui/blob/main/src/components/flex/_flex_item.scss#L31-L41

[github-actions[bot]]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[github-actions[bot]]

❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.

[cee-chen]

This still seems valid to resolve.