CSS calc usage - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the computed width of the box?

Given the CSS below, what will be the width of the .box element if the parent container is 400px wide?

CSS

.box {
  width: calc(100% - 50px);
}

A 50px

B 350px

C 400px

D calc(100% - 50px) (not computed)

💡 Hint

Remember that 100% means the full width of the parent container.

The calc(100% - 50px) means take the full width of the parent (400px) and subtract 50px, resulting in 350px.

❓ layout

intermediate

How does calc affect margin in this example?

If the CSS below is applied, what is the left margin of the .item element when the viewport width is 800px?

CSS

.item {
  margin-left: calc(10vw + 20px);
}

A 20px

B 80px

C 100px

D calc(10vw + 20px) (not computed)

💡 Hint

1vw equals 1% of the viewport width.

10vw means 10% of 800px, which is 80px. Adding 20px gives 100px total margin-left.

🧠 Conceptual

advanced

What error occurs with this calc usage?

Consider this CSS snippet. What error or problem will it cause in browsers?

CSS

.header {
  height: calc(50% - 20);
}

A Height becomes 30% automatically

B No error, height is 50% minus 20px

C Runtime error: Invalid calculation

D SyntaxError: Missing unit after number 20

💡 Hint

In calc, all numbers must have units unless they are zero.

The value 20 has no unit like px or %. CSS requires units for numbers in calc except zero. This causes a syntax error.

❓ selector

advanced

Which option correctly uses calc with CSS variables?

Given the CSS variables below, which option correctly sets the width using calc?

CSS

:root {
  --sidebar-width: 250px;
  --gap: 20px;
}
.container {
  width: /* fill here */;
}

A calc(var(--sidebar-width) + var(--gap))

B calc(--sidebar-width + --gap)

C calc(var(--sidebar-width + var(--gap)))

D calc(var(--sidebar-width) var(--gap))

💡 Hint

Use var() to access CSS variables inside calc and separate with operators.

Option A correctly uses var(--sidebar-width) and var(--gap) with a plus sign inside calc. Other options have syntax errors.

❓ accessibility

expert

How does using calc improve accessibility in responsive design?

Which statement best explains how calc() helps create accessible layouts?

A <p>It allows combining relative and absolute units to adapt layout sizes, improving readability on different devices.</p>

B <p>It disables zooming to keep layout fixed.</p>

C <p>It automatically increases font size for screen readers.</p>

D <p>It hides content that does not fit the screen.</p>

💡 Hint

Think about how combining units helps with flexible layouts.

Using calc() lets designers mix percentages and pixels, so layouts adjust smoothly to screen sizes. This flexibility helps users read and navigate content better on all devices.