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.

Practice

1. What does the Tailwind class flex-grow-0 do to a flex item?

easy

A. Prevents the item from growing to fill extra space

B. Makes the item grow to fill all extra space

C. Prevents the item from shrinking when space is tight

D. Makes the item shrink faster than others

Solution

1. Step 1: Understand flex-grow property

   The flex-grow property controls how much a flex item can grow relative to others when extra space is available.

2. Step 2: Interpret the class flex-grow-0

   The class flex-grow-0 sets flex-grow to 0, meaning the item will not grow to fill extra space.

3. Final Answer:

   Prevents the item from growing to fill extra space -> Option A

4. Quick Check:

   flex-grow-0 means no growth [OK]

Hint: flex-grow-0 means no growth, flex-grow-1 means grow [OK]

Common Mistakes:

• Confusing grow with shrink
• Thinking flex-grow-0 allows growth
• Mixing flex-grow with flex-shrink

2. Which Tailwind class correctly prevents a flex item from shrinking?

easy

A. flex-grow-1

B. flex-grow-0

C. flex-shrink-1

D. flex-shrink-0

Solution

1. Step 1: Understand flex-shrink property

   The flex-shrink property controls how much a flex item shrinks when space is limited.

2. Step 2: Identify the class that disables shrinking

   The class flex-shrink-0 sets flex-shrink to 0, preventing the item from shrinking.

3. Final Answer:

   flex-shrink-0 -> Option D

4. Quick Check:

   flex-shrink-0 means no shrinking [OK]

Hint: Use flex-shrink-0 to stop shrinking, flex-shrink-1 to allow [OK]

Common Mistakes:

• Choosing flex-grow classes instead of flex-shrink
• Assuming flex-shrink-1 prevents shrinking
• Mixing grow and shrink properties

3. Given this HTML snippet:

<div class="flex w-64">
  <div class="flex-grow-0 w-16 bg-blue-500">A</div>
  <div class="flex-grow w-32 bg-red-500">B</div>
</div>

What will happen to the widths of the two divs inside the flex container?

medium

A. A shrinks, B stays fixed at 32 width

B. A stays 16 width, B grows to fill remaining space

C. Both A and B grow equally to fill space

D. A grows, B shrinks to 16 width

Solution

1. Step 1: Analyze flex-grow classes

   Div A has flex-grow-0 so it won't grow beyond its width 16. Div B has flex-grow (equivalent to flex-grow-1) so it will grow to fill leftover space.

2. Step 2: Understand container width and item widths

   The container is 64 width. A uses 16 width fixed, B starts at 32 but grows to fill remaining space (64 - 16 = 48 or more if allowed).

3. Final Answer:

   A stays 16 width, B grows to fill remaining space -> Option B

4. Quick Check:

   flex-grow-0 no grow, flex-grow fills space [OK]

Hint: flex-grow-0 fixes size, flex-grow fills leftover space [OK]

Common Mistakes:

• Assuming flex-grow-0 items grow
• Thinking both grow equally without flex-grow class
• Ignoring container width limits

4. You have this code:

<div class="flex w-40">
  <div class="flex-shrink-0 w-24 bg-green-400">X</div>
  <div class="flex-shrink w-24 bg-yellow-400">Y</div>
</div>

But the second div overflows the container. What is the problem?

medium

A. flex-shrink on second div prevents shrinking, causing overflow

B. w-24 is too small for both divs, causing overflow

C. flex-shrink-0 on first div prevents it from shrinking, causing overflow

D. Missing flex-grow classes causes overflow

Solution

1. Step 1: Check widths and container size

   Container width is 40. Both divs have width 24, total 48, which is more than container.

2. Step 2: Analyze flex-shrink classes

   First div has flex-shrink-0, so it cannot shrink below 24. Second div has default shrink, so it tries to shrink but can't reduce enough to fit container.

3. Final Answer:

   flex-shrink-0 on first div prevents it from shrinking, causing overflow -> Option C

4. Quick Check:

   flex-shrink-0 stops shrinking, causes overflow [OK]

Hint: flex-shrink-0 stops shrinking, watch container overflow [OK]

Common Mistakes:

• Thinking flex-shrink on second div causes overflow
• Ignoring container width limits
• Assuming flex-grow affects shrinking

5. You want three flex items inside a container to share leftover space proportionally: the first twice as much as the second, and the third does not grow. Which Tailwind classes should you use?

hard

A. First: flex-grow-2, Second: flex-grow-1, Third: flex-grow-0

B. First: flex-grow, Second: flex-grow-2, Third: flex-grow-0

C. First: flex-grow-1, Second: flex-grow-2, Third: flex-grow-0

D. First: flex-grow-0, Second: flex-grow-1, Third: flex-grow-2

Solution

1. Step 1: Understand proportional growth with flex-grow

   Flex-grow values determine how leftover space is divided. A value of 2 means twice the space compared to 1.

2. Step 2: Assign classes to match proportions

   First item needs flex-grow-2, second flex-grow-1, third flex-grow-0 to not grow.

3. Final Answer:

   First: flex-grow-2, Second: flex-grow-1, Third: flex-grow-0 -> Option A

4. Quick Check:

   flex-grow values set proportional growth [OK]

Hint: Use flex-grow numbers to set proportional growth [OK]

Common Mistakes:

• Using wrong grow numbers or order
• Assigning flex-grow-0 to growing items
• Confusing grow with shrink classes