Flex grow and shrink in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding flex-grow behavior

Given three flex items inside a container with flex-grow values of 1, 2, and 3 respectively, how will the extra space be distributed among them?

A Only the item with the highest flex-grow value gets all the extra space.

B All items get equal extra space regardless of their flex-grow values.

C The extra space is distributed inversely proportional to the flex-grow values.

D The first item gets 1 part, the second 2 parts, and the third 3 parts of the extra space.

💡 Hint

Think of flex-grow as how many shares of extra space each item wants.

The flex-grow property defines how much of the available space inside the container each item should take. The space is divided proportionally based on the flex-grow values.

📝 Syntax

intermediate

Correct Tailwind class for flex-shrink

Which Tailwind CSS class correctly sets an element's flex-shrink property to 0, preventing it from shrinking?

A flex-shrink-0

B shrink-0

C flex-no-shrink

D no-shrink

💡 Hint

Tailwind uses short class names for flex shrink and grow.

In Tailwind CSS, shrink-0 sets flex-shrink: 0;. The prefix flex- is not used for shrink classes.

❓ rendering

advanced

Visual effect of flex-grow and flex-shrink combined

You have a flex container with fixed width 600px and three items inside. The items have these Tailwind classes:

grow-0 shrink-0 w-40, grow shrink w-40, and grow-0 shrink w-40 respectively.

What will happen when the container width shrinks to 300px?

Tailwind

<div class="flex w-[600px] border border-gray-400">
  <div class="grow-0 shrink-0 w-40 bg-red-300">Item 1</div>
  <div class="grow shrink w-40 bg-green-300">Item 2</div>
  <div class="grow-0 shrink w-40 bg-blue-300">Item 3</div>
</div>

A Item 1 keeps its width, Item 2 shrinks, Item 3 shrinks.

B All items shrink equally to fit 300px.

C Item 1 shrinks, Item 2 grows, Item 3 keeps width.

D Item 1 grows, Item 2 shrinks, Item 3 grows.

💡 Hint

Remember that shrink-0 prevents shrinking and flex-grow affects growing only.

Item 1 has shrink-0 so it keeps its width. Item 2 and 3 can shrink, so they reduce width to fit the smaller container.

❓ selector

advanced

Selecting the correct Tailwind class for flex-grow 2

Which Tailwind CSS class correctly sets flex-grow to 2 for an element?

A grow-2

B flex-grow-2

C grow-double

D flex-grow-2x

💡 Hint

Tailwind uses short class names for grow values.

grow-2 sets flex-grow: 2; in Tailwind CSS. The prefix flex-grow- is not used.

❓ accessibility

expert

Ensuring accessible flexbox layout with dynamic grow and shrink

You have a navigation bar with flex items that grow and shrink dynamically. What is the best practice to ensure keyboard users can navigate the items easily and screen readers understand the structure?

A Use <span> elements with flex classes and no ARIA roles, relying on visual layout only.

B Use <div> elements only with flex classes and add tabindex="0" to each item.

C Use semantic <nav> and <ul> elements with <li> for items, and ensure focus styles are visible on flex items.

D Use <nav> with flex items but hide focus outlines to keep design clean.

💡 Hint

Think about semantic HTML and keyboard focus visibility.

Using semantic elements like <nav> and lists helps screen readers understand navigation. Visible focus styles help keyboard users see where they are.