What is the default value of the flex property?

You're building a simple two-column layout with flexbox, and one column is way taller than the other — the shorter one isn't stretching. What's the most likely cause, and how would you fix it?

I added three buttons in a row using flexbox, but they're all squished together and not spacing out. What default flex behavior might be causing this, and how do you make them spread evenly?

Our header bar has a logo, search bar, and user avatar — the search bar is collapsing to zero width on mobile even though it has content. What’s probably happening with flex defaults, and how would you debug it?

A team member says 'flex: 1' made their card expand too much, so they removed it — now the layout breaks on small screens. Why did removing flex: 1 break it, and what’s the right way to control growth without over-expanding?

We have a dynamic dashboard with 5-20 widgets that should shrink gracefully on small screens, but some widgets with images are overflowing. How would you design the flex rules to handle content-based sizing without breaking layout, and why is the default flex-basis: auto tricky here?

In our component library, flex items behave inconsistently across different containers — sometimes they grow, sometimes they don’t. How would you audit and standardize the flex defaults to ensure predictable behavior without forcing explicit values everywhere?

We’re migrating a legacy UI from floats to flexbox, and dozens of pages have broken layouts because old code assumed content-sized elements wouldn’t shrink. How would you design a migration strategy that minimizes regressions while enforcing consistent flex defaults across teams?

Our design system uses flexbox for all layouts, but engineers keep overriding flex defaults inconsistently — leading to performance hits from excessive reflows. How would you architect a CSS strategy that enforces safe, performant flex defaults at scale without requiring every developer to memorize the spec?