Menu
The spec says that a horizontal scrollbar is supposed to be always shown if overflow-x: scroll is set.
On my website I often post code in a <pre>-Block. As this has no predefined width, but the surrounding div does have a maximum (defined as percentage), it seems that I can not figure out how to achieve the following: In case a code block is not too wide, hide the horizontal scrollbar. If it exceeds the width, show a scrollbar. Any hints? I think I have tried most of the combinations of overflow-x and -y, but none seem to do what I want.
319
By default, a scroll bar will appear when the content is too long. Page authors can override this in a number of ways, for example: overflow-y: hidden => cut off content that is too long. overflow-y: scroll => always show a scroll bar even when it's not needed.
Use overflow: auto . Scrollbars will only appear when needed. (Sidenote, you can also specify for only the x, or y scrollbar: overflow-x: auto and overflow-y: auto ).
Make sure overflow is set to "scroll" not "auto." With that said, in OS X Lion, overflow set to "scroll" behaves more like auto in that scrollbars will still only show when being used. So if any the solutions above don't appear to be working that might be why. This thing work!
Use:
overflow-x: auto; auto tells the browser to only show a scrollbar if the content exceeds the width of the box.
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
