Container expands width with its content. Make vertical scrollbar outside, not inside

Question

Here is the example

I want to have the container expands width with its content. At the same time, its height is fixed. If overflowed vertically, there should be a vertical scrollbar.

Now, overflow:auto makes the scrollbar somehow inside the container, covering the content. That's not what I want.

If I use overflow:scroll, the scrollbar will be outside, but it's always there even when there is no overflow.

How can I solve the dilemma here? Tested on Windows, latest version of Chrome.

Possible duplicate of CSS problem - horizontal scrollbar hides the content — Paran0a

Asad Ali Asad Ali · Accepted Answer · 2016-06-03T07:46:57

Well it seems not so difficult. Have you tried setting width to auto?

Try using following CSS; It will output the same result as you require.

.container {
    float: left;
    height: 50px;
    width: auto;
    overflow-y: scroll;
}

Setting width to auto will make the div to expand according to its content and there will not be horizontal scroll bar as you want. Then setting just overflow-y to scroll will give you only vertical scroll bar.

Hope That Helps...

Container expands width with its content. Make vertical scrollbar outside, not inside

2 Answers