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.

Scrollbar is rendered within bounds of `div#container`. Is it you want `div#container` to extend its width to 420px or similar so its scrollbar isn't covering contained fixed-width elements `div.content`? — Thomas Urban, Apr 18 '14 at 13:08
That's exactly what I want. Increase the width of the `container` div if the scrollbar is displayed so that it doesn't cover the `content`. — Elfayer, Apr 18 '14 at 13:16
I don't think there is any CSS-only solution to this ... my best bet is having custom scrollbar implementation using Javascript to be rendered next to the div rather than within its bounds. — Thomas Urban, Apr 18 '14 at 13:21

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 18 '14 at 12:52

Luca Davanzo

21,000
15
120
146

In your demo the `overflow-y` is equal to `scroll`, it should be `auto`. – Elfayer Apr 18 '14 at 12:59
This doesn't work for me, it has the same behavior as at the begining. And `Uncaught ReferenceError: jQuery is not defined `. – Elfayer Apr 18 '14 at 13:43
sorry I forget to include jquery, fixed! – Luca Davanzo Apr 18 '14 at 13:44
Still not woring for me. ^^ – Elfayer Apr 18 '14 at 13:48
I've tested on chrome and firefox and it works: obviously, first time only, I haven't include a check when windows resize or something else.. if you try to resize result window until scrollbar is visible, and the click run again, you'll see that works.. – Luca Davanzo Apr 18 '14 at 13:52
Ok ! But it's only at load, not during the session. I only have to add an event on resize ? – Elfayer Apr 18 '14 at 14:00
yes, just the first time. If you want that works on window resize, for instance, you have to add the control inside this code : $( window ).resize(function() { /* check */ }); – Luca Davanzo Apr 18 '14 at 14:02
Isn't that awesome ? x) I would have prefer a full JS solution, but I found a substitute to your `hasScrollBar()` here: http://stackoverflow.com/questions/4880381/check-whether-html-element-has-scrollbars – Elfayer Apr 18 '14 at 14:24

score 1 · Answer 2 · answered Apr 18 '14 at 14:10

1

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/

answered Apr 18 '14 at 14:10

silverwind

3,296
29
31

Easy and elegant solution, but it reduces the width of the content. – Elfayer Apr 18 '14 at 14:19

score 0 · Answer 3 · answered Apr 18 '14 at 12:50

0

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

answered Apr 18 '14 at 12:50

Toby van Kempen

1,447
4
13
20

How to adapt width when a div is scrolling?

3 Answers3

Edit