Prevent full width inner div from getting cut off when scrolled within parent

Prevent full width inner tag from getting cut off when parent is set to overflow auto.

When the browser window is smaller than the content within a block tag, and you scroll to the right, then scrolled child tag will move left with the rest of the page rather than occupying 100% of the width of the available scroll area.

This scenario is commonly faced by UI developers. The parent tag is set to overflow auto, however the child tag gets cut off when it’s width is lesser than the browser view port. This situation can be solved by the use of the following code within the wrapping parent tag.

display: inline-block;
position: relative;
min-width: 100%;
overflow: visible;

Open fiddle

Recent Article

Leave a Reply

Your email address will not be published. Required fields are marked *