How do you prevent an element from wrapping in a flex container?

You need a navigation bar where the menu items stay on a single line even when the viewport is narrow. How would you write the CSS to stop the items from wrapping inside the flex container?

If you apply display: flex to a container and notice that its child elements are wrapping onto a new line, what property would you adjust to keep them on one line, and what values would you use?

What happens if you set flex-wrap: nowrap but the content overflows the container? How would you handle that?

Your team added a new button to a flex toolbar, and now the toolbar items start wrapping on some browsers. Walk me through how you'd diagnose and fix the wrapping issue.

We want the flex items to stay on one line but also be scrollable horizontally when they exceed the container width. How would you implement that, and what CSS properties are involved?

Explain why using white-space: nowrap on a flex item might not prevent wrapping, and what the correct approach is.

You're building a reusable card component library that uses flex layout. Some consumers need the card's header elements to never wrap, even when the card is placed in a grid that can shrink. How would you design the component's CSS to guarantee no wrapping while keeping it flexible for different content lengths?

In a large application, a flex container with many items sometimes causes layout thrashing when you toggle flex-wrap. Discuss the performance implications and how you'd mitigate them.

We need to support legacy browsers that don't understand flex-wrap: nowrap. What fallback strategies would you employ to ensure elements stay on one line across all supported browsers?

Our design system is being migrated from a legacy float‑based layout to flexbox. One of the migration goals is to eliminate wrapping in toolbar components without breaking existing themes. Outline a migration plan that addresses CSS overrides, testing, and cross‑team coordination.

When scaling a micro‑frontend architecture, each team ships its own CSS. How would you enforce a rule that certain critical UI elements never wrap, and what tooling or linting would you put in place?

Discuss the trade‑offs of using utility‑first CSS (e.g., Tailwind) versus custom component CSS for controlling flex wrapping in a massive codebase.