How to make ul extend past parent div?

I have a container div with a set width and height and the overflow set to auto. Inside, there is an unordered list with content that causes the div to scroll.

The problem is that the list itself does not extend past the container div. So when I try to add padding to the right side of the list, it doesn’t work properly:

enter image description here

enter image description here


.container {
    width: 200px;
    height: 400px;
    overflow: auto;

ul {
    list-style-type: none; 
    margin: 0;
    padding: 0 10px 0 0;
    white-space: nowrap;

Here’s a fiddle that shows the problem:

Source: html

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.