How to adapt width when a div is scrolling?

Question

I have a div with width: 400px; and overflow: auto . Is it possible to adapt the width of the div when the scrollbar is displayed ?

See example : here (resize the "Result" box up and down)

I'd prefer a css solution.

Answer 1

You can use:

min-width: size;

on the container css. Where size is 400px + scrollbar width.

Take a look at demo .

Edit

I can't find how make it possibile with css only, sorry.
But checking if your div has scrollbar enabled, you can apply min-width attribute and it work.

Test here and let me know.

In your case, I think you have to do the hasScrollBar() test anyway happens something, such as window-resize or something else.

This example works on event window resize.

Answer 2

Use a percentage-based width, which adapts to scrollbars automatically. 390/400 is 97.5%, this should do:

width: 97.5%;

Here's your fixed fiddle: http://jsfiddle.net/yzngV/7/

Answer 3

You could try using vw and vh values. More info here .