CODEWITHSUNDEEP
htmlcss
Shawn
Shawn

Reputation: 2735

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

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.

Upvotes: 1

Views: 101

Answers (2)

Pushpendra
Pushpendra

Reputation: 1712

Add position:relative; to .container1 class. Have 2 div containers

Pen

Upvotes: 1

Asad Ali
Asad Ali

Reputation: 361

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...

Upvotes: 1

Related Questions