CSS: Overflow: auto is not working

Page is shifting layout, instead of adding a scrollbar. The issue might not be overflow: auto itself, but higher up
CSS: Overflow: auto is not working

Sometimes you want to have something big, displayed in a smaller area without breaking the layout and that's where overflow:auto comes in

/etc/some/document/in/a/very/long/folder/that/can/cause/issues/if/overflow/or/special/care/is/not/taken/then/this/can/break/the/website/design/and/thats/not/something/one/want/to/happen.txt

By using overflow:auto, as seen on the text above. This will apply an scrollbar if element is to big and allow you to scroll on the object, instead of breaking the layout

overflow:auto #Any direction overflow-x:auto #Only horizontal overflow-y:auto #Only vertical

The overflow tag you add in your CSS, for the element you want to be able to expand and you can choose if it should be all directions or one specific one, by defining x-axis (horizontal) and y-axis (vertical)

Why isn't overflow:auto working?

Implementing overflow:auto is often fairly straight forward, but can sometimes not work as intended and you might be Googling different solutions and most are hack to just get it to work. Instead of understanding why it's not working

body > article > article body > article overflow element

In above scenario, you might be troubleshooting why it's not working in the article overflow element, where you applied overflow:auto. Without realizing the culprit is further up, in the article section

min-width:360px;

Especially in a dynamic design, you don't always specify sizes and sometimes it can be enough to go up a few steps in your layout and specify a minimum width. So that code further down have something to work out from

We sometimes publish affiliate links and these always needs to follow our editorial policy, for more information check out our affiliate link policy

You might also like

Reducing your CSS by redusing repetive code
CSS

Reducing your CSS by redusing repetive code

You can now select parents in CSS with :has
CSS

You can now select parents in CSS with :has

Waking up during the night to pee could mean you're peeing wrong
Health

Waking up during the night to pee could mean you're peeing wrong

Powder vs Liquid vs Capsul Detergent
Cleaning

Powder vs Liquid vs Capsul Detergent

Comments

Sign up or Login to post a comment

There are no comments, be the first to comment.