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
Sometimes you want to have something big, displayed in a smaller area without breaking the layout and that's where overflow:auto comes in
[snippet]/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[/snippet]
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
[snippet]overflow:auto #Any direction
overflow-x:auto #Only horizontal
overflow-y:auto #Only vertical[/snippet]
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
[snippet]body > article > article body > article overflow element[/snippet]
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
[snippet]min-width:360px;[/snippet]
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
Tags: #overflowauto
