Flex basis and sizing in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding flex-basis in Tailwind CSS

What is the effect of applying flex-basis using Tailwind's basis-1/4 class on a flex item inside a flex container?

Tailwind

<div class="flex">
  <div class="basis-1/4 bg-blue-500">Box 1</div>
  <div class="flex-1 bg-red-500">Box 2</div>
</div>

A The first box takes up exactly 25% of the container's main axis width, and the second box fills the rest.

B The first box grows to fill the container, ignoring the 25% basis, and the second box shrinks.

C Both boxes share the container width equally regardless of basis.

D The first box shrinks to 25px width, and the second box fills the rest.

💡 Hint

Remember that basis-1/4 sets the initial size before growing or shrinking.

The basis-1/4 class sets the flex-basis to 25% of the container's width. This means the first box starts at 25% width. The second box with flex-1 grows to fill the remaining space.

📝 Syntax

intermediate

Tailwind class for fixed flex-basis

Which Tailwind CSS class sets a flex item's flex-basis to exactly 10rem?

A basis-[10rem]

B basis-40

C basis-10rem

D basis-2.5

💡 Hint

Use square brackets for arbitrary values in Tailwind.

Tailwind uses square brackets to specify arbitrary values like basis-[10rem]. The class basis-10rem does not exist by default.

❓ rendering

advanced

Visual effect of flex-basis with grow and shrink

Given this HTML, what will be the width of the blue box inside a 400px wide container?

Tailwind

<div class="flex w-[400px]">
  <div class="basis-1/2 flex-shrink-0 bg-blue-500">Blue Box</div>
  <div class="flex-1 bg-green-500">Green Box</div>
</div>

A The blue box will collapse to zero width.

B The blue box will shrink below 200px to fit the container.

C The blue box will grow larger than 200px to fill extra space.

D The blue box will be exactly 200px wide and will not shrink.

💡 Hint

Check the effect of flex-shrink-0 on the flex item.

The basis-1/2 sets the base width to 50% (200px). The flex-shrink-0 prevents shrinking, so the blue box stays at 200px even if space is tight.

❓ selector

advanced

Selecting flex items by basis size in Tailwind

Which CSS selector targets all flex items with flex-basis set to 25% using Tailwind's basis-1/4 class?

A .basis-1/4

B .basis-1\/4

C [class*=basis-1/4]

D .basis-1-4

💡 Hint

Remember how Tailwind escapes slashes in class names.

Tailwind escapes slashes in class names with a backslash. The correct selector is .basis-1\/4. Using .basis-1/4 is invalid CSS.

❓ accessibility

expert

Ensuring accessible flex layouts with basis and sizing

When using flexbox with fixed flex-basis sizes in Tailwind, what is the best practice to maintain accessibility for keyboard users and screen readers?

A Avoid using flexbox and basis sizes; use tables instead for layout.

B Set <code>tabindex="-1"</code> on all flex items with fixed basis to prevent keyboard focus.

C Use semantic HTML elements and ensure focus order matches visual order, regardless of flex-basis sizes.

D Add ARIA roles to flex items to override default semantics.

💡 Hint

Think about how keyboard navigation and screen readers follow DOM order.

Accessibility depends on semantic HTML and logical focus order. Flexbox changes visual layout but does not affect DOM order. Using semantic elements and matching focus order ensures accessibility.

Practice

1. What does the Tailwind class basis-1/3 do in a flex container?

easy

A. Makes the flex item grow to fill one-third of the container

B. Sets the initial size of the flex item to one-third of the container's main size

C. Prevents the flex item from shrinking below one-third of its size

D. Sets the flex item to always be exactly one-third of the container width regardless of content

Solution

1. Step 1: Understand flex basis meaning

   Flex basis sets the starting size of a flex item before growing or shrinking.

2. Step 2: Interpret basis-1/3 in Tailwind

   This class sets the flex basis to one-third of the container's main size, not forcing exact size but initial size.

3. Final Answer:

   Sets the initial size of the flex item to one-third of the container's main size -> Option B

4. Quick Check:

   Flex basis = initial size = one-third [OK]

Hint: Flex basis sets start size, not final size [OK]

Common Mistakes:

• Confusing basis with grow or shrink
• Thinking basis fixes size exactly
• Assuming basis prevents shrinking

2. Which of the following is the correct Tailwind class to set a flex item's basis to 16rem?

easy

A. basis-16rem

B. basis-64rem

C. basis-16

D. basis-64

Solution

1. Step 1: Recall Tailwind sizing scale

   Tailwind uses numeric scale where 64 equals 16rem (4rem * 16).

2. Step 2: Match class syntax

   The correct class is basis-64 to set basis to 16rem, no 'rem' suffix used.

3. Final Answer:

   basis-64 -> Option D

4. Quick Check:

   basis-64 = 16rem in Tailwind [OK]

Hint: Tailwind uses numbers, not units, for spacing [OK]

Common Mistakes:

• Adding 'rem' suffix in class name
• Using wrong numeric scale
• Confusing basis with width classes

3. Given this HTML snippet:

<div class="flex w-96">
  <div class="basis-1/4 bg-blue-500">Box 1</div>
  <div class="basis-1/2 bg-red-500">Box 2</div>
  <div class="basis-1/4 bg-green-500">Box 3</div>
</div>

What will be the width of Box 2 inside the 24rem wide container?

medium

A. 6rem

B. 24rem

C. 12rem

D. 18rem

Solution

1. Step 1: Calculate container width in rem

   The container width is 24rem (w-96 means 24rem).

2. Step 2: Calculate Box 2 basis size

   Box 2 has basis-1/2, so initial size is half of 24rem = 12rem.

3. Final Answer:

   12rem -> Option C

4. Quick Check:

   Half of 24rem = 12rem [OK]

Hint: Multiply container width by basis fraction [OK]

Common Mistakes:

• Confusing basis fraction with grow factor
• Using container width in px instead of rem
• Adding basis sizes instead of calculating individually

4. You wrote this Tailwind code:

<div class="flex">
  <div class="basis-2/3">Item 1</div>
  <div class="basis-1/2">Item 2</div>
</div>

But the items overflow the container width. What is the main reason?

medium

A. The sum of basis sizes (2/3 + 1/2) exceeds 1, causing overflow

B. Missing flex-grow classes to allow shrinking

C. Tailwind does not support fractional basis classes

D. The container needs flex-wrap to prevent overflow

Solution

1. Step 1: Calculate the sum of basis fractions

   2/3 + 1/2 = 4/6 + 3/6 = 7/6 > 1.

2. Step 2: Understand the effect

   When the sum of flex-basis values exceeds 1, it causes the flex items to overflow the container.

3. Final Answer:

   The sum of basis sizes (2/3 + 1/2) exceeds 1, causing overflow -> Option A

4. Quick Check:

   Sum of basis fractions > 1 causes overflow [OK]

Hint: Check if basis fractions sum over 1 for overflow [OK]

Common Mistakes:

• Assuming basis fractions always fit container
• Ignoring default flex shrink behavior
• Confusing grow with shrink effects

5. You want three flex items inside a container to have these widths initially: 25%, 50%, and 25%. You also want the middle item to grow twice as fast as the others when space is available. Which Tailwind classes correctly achieve this?

hard

A. basis-1/4 grow, basis-1/2 [flex-grow:2], basis-1/4 grow

B. basis-1/4 flex-grow-1, basis-1/2 flex-grow-2, basis-1/4 flex-grow-1

C. basis-1/4 grow, basis-1/2 grow [flex-grow:2], basis-1/4 grow

D. basis-1/4 grow, basis-1/2 grow, basis-1/4 grow

Solution

1. Step 1: Set correct basis classes

   Use basis-1/4 for 25% and basis-1/2 for 50% widths.

2. Step 2: Apply grow classes

   Tailwind uses grow for flex-grow:1 and [flex-grow:2] for flex-grow:2.

3. Step 3: Assign grow classes to items

   First and third items get grow, middle item gets [flex-grow:2] to grow twice as fast.

4. Final Answer:

   basis-1/4 grow, basis-1/2 [flex-grow:2], basis-1/4 grow -> Option A

5. Quick Check:

   Use grow and [flex-grow:2] with basis fractions [OK]

Hint: Use grow and [flex-grow:2] classes for different grow rates [OK]

Common Mistakes:

• Using non-existent flex-grow-1 class
• Combining grow and grow-2 on same element
• Forgetting to set basis sizes