Overflow: Hidden Property Confusion

In the “learn-typography-by-building-a-nutrition-label” chapter, I’m asked to set the Overflow property - of a h1 element - to have a Hidden value.

However, instead of hiding text that flows over the (content?), the (content?) box expands to make sure the overflow is caught inside.

I don’t have a clue why this is.

Might be good to post the link to the challenge…

Uhh…I forgot…

But the behaviour I’ve witnessed shouldn’t be correct, right?

Please attach a reference link to help you out. or add more context about your problem.

i haven’t done this exercise so I cannot guess without looking at least at it.
I did see something related to this in the github issues for freecodecamp so you can also check there if you think there is a bug (maybe it is already reported)

Oh, then I’ll assume it’s a bug, and “the behaviour I’ve witnessed shouldn’t be correct”.

This challenge step?

It isn’t a bug, overflow: hidden creates a new block formatting context. This thread has some more info even though it is about a different challenge.


I’m not sure I understand why it is done this way. I would avoid using overflow hidden unless you are trying to actually hide an overflow.

Just skimming this challenge I don’t think it is that great, I find both the HTML and CSS questionable. I question it even teaching typography much to be honest.

I might try and update it at some point. I would probably end up rewriting it completely and that is a lot of work.

1 Like

Thanks for the explanation, I can’t understand much since I’m a newbie, but thank you!