Written by Mandy Michael

Chapter One: Overflow Hidden

Overflow determines what happens to the content when it breaks outside of the bounds of the container. When you have too much content filling the space, or when you have crowded the page with information overflow can help you wrangle the extra content.

The default state of overflow is "visible". If the content exceeds the available space it will flow outside of the box. As our default state there isn’t a need to set this explicitly and it sets a good starting point to see what you have to work with and what capacity you have to deal with it.

The opposite to “visible” is “hidden” and will simply hide anything that overflows the container. This can be handy and feel like a really good fix but ultimately you are just making anything outside of that container inaccessible.

My confession about overflow: hidden is that i've definitely misused it before; the unwanted scrollbar. You know, the one where you are not sure what is causing the scrollbar so you just add “overflow: hidden” on the container. You rejoice because it solves the problem...but part of you knows that it doesn’t. The problem doesn’t go away it just hides it and you know that eventually that is going to be a real problem that you have to deal with.

This is certainly something I have done when life gets too hard, or when we have too much going on. We just ignore that it’s a problem and whack a mental “overflow:hidden” on everything that flows out of our capacity. It helps in the short term because we feel better, but eventually when we actually have to deal with all the content we hid away, we have no way to manage it.

I want to be clear though that there are occasions where overflow:hidden are really handy. Sometimes it is the best option, for example, if you are hiding content until you are ready for it, like in a carousel, where you move the slides into the “viewable” area. This is a totally legitimate use for overflow:hidden and knowing when to use these properties and values is very important. Just like the carousel example, overflow:hidden can be really valuable in life as well. Sometimes it is important to just take a step away and have a break, forget about all the things you have to do and just focus on the viewable area.

But what about “overflow:scroll”!? It’s a good question and it is certainly an option. It might even feel like we are managing things, we acknowledge that there is too much content and we are doing our best to work it out. It might often be a bit ugly and feels sort of clunky but it’s kind of working...right? That is what we tell ourselves anyway, but really we aren’t solving the problem that we just have too much stuff for the space we have available.

So here is my first tip about life and css:

Don’t over commit, when you see overflow:auto and everything is spilling over it might seem easy to reach for overflow:hidden and ignore the issues but always try and solve the root of the problem. I think we can all acknowledge that overflow:scroll rarely works effectively and often creates a pretty poor experience for everyone.

Be realistic about what you can fit into your life. Rearrange your priorities to make more room, or remove things that you don’t need anymore. Just trying to cram everything into your page, or your life is not going to work, eventually things are going to run into each other. Pretending your issues don’t exist, like the misuse of overflow:hidden, doesn’t solve your problems. Eventually you are going to have to deal with the overflow, pre-empt that and be kind to your future self.

Remember to make time for yourself. Filling every single moment of your life, or every bit of available space on your page might seem like you are making the most of things, using overflow:scroll might make you feel organised. But don’t forget that white space is just as important. In a time when we’re surrounded by information it’s the empty space that makes us appreciate and focus on the important content being presented to us. Don’t be afraid of the white space in your life, embrace it.

Wrangle your content and your commitments, be responsible with your overflow. A good design has quality content with enough white space to give you time to reflect on what’s important.

‹ Back to home

Contact me on Twitter @mandy_kerr, or email me