2

I have an absolutely positioned div, with overflow:auto.

When it overflows vertically, a vertical scrollbar appears. This appears within my div (even though it isn't fixed width), which shrinks the space available to the div's contents. In my case, it causes the text to wrap unnecessarily, which is undesirable.

See https://jsfiddle.net/hktgcrj0/ - shrink the page until the div overflows and the scroll bar appears - you will see the text wrap.

Is there any way to make the scrollbar appear outside of the div, or increase the width of the div to accommodate the scroll bar?

Note that for my application (the fiddle is massively simplified) giving the div a fixed width is not an option, and disabling text wrapping is also not an option.

stripybadger
  • 4,539
  • 3
  • 19
  • 26
  • Related: http://stackoverflow.com/questions/13054797/how-to-prevent-a-webkit-scrollbar-from-pushing-over-the-contents-of-a-div – jfrej Jul 19 '16 at 13:21
  • @jfrej i dont think it is related. check question he is asking that he dont want to use any fixed number for width. – tejpal Jul 19 '16 at 13:22

1 Answers1

0

Try adding:

div { white-space: nowrap; }

or wrap the inner elements in <p> tags and apply white-space: nowrap; to that.

Toby
  • 12,743
  • 8
  • 43
  • 75
  • I did say that disabling text wrapping is not an option. – stripybadger Jul 19 '16 at 12:23
  • You want the text to wrap, but not based on the additional space occupied by the scrollbar? I guess I'm unclear exactly what you're trying to achieve - if the scrollbar is outside of the div, it will be hidden when the window width is equal to the width of the div.. – Toby Jul 19 '16 at 12:33
  • The div will have a maximum size dictated by some other constraints. When it hits that max I would want the text to wrap. However unless the div is hitting that maximum, I would not want the code to wrap. Does that help? If what I'm asking for is stupid, then I'm happy for someone to point that out. – stripybadger Jul 19 '16 at 12:48
  • I don't believe it's just stupid, but I'm not sure about the viability - the scrollbar isn't an exact width, it's different on every browser, and behaves differently on mobile, etc. Perhaps flexbox can offer a solution? http://bennettfeely.com/flexplorer/ – Toby Jul 19 '16 at 12:54