Div inside custom scrollbar content does not work properply

Question

i inserted div (.test) to custom scrollbar plugin. By default, width and height is 100%.

HTML

 <div class="container default-skin">
     <div class="test">asdasd</div>
 </div>

CSS

.container { position:absolute; width:100%; height:100%; top:0; box-sizing: border-box; overflow: hidden; }
.test { float:left; width: 100%; height:1500px; background:red; }

Problem consists of several elements.

a) .test div does not working properply with percentages, but works with pixels.

b) if i am using position:absolute in .test div, than all scrollbar with all content disappears.

c) similar problems with percentages or positioning in this div.

My question:

How can i fix this problems? I want to put .test div to the center of the page. But for that, i need float and margins options (they are not working). Also, in future i will use percentages, so, how i can avoid this problems in future?

I created a demo in jsfiddle. Check it

Answer 1

First, I think that you have a layout positioning issue and that's why the scrollbars get messed up. Without knowing anything about the intrinsics of the scrollbar plugin or without even reverse engineering the scrollbar plugin, I'd cast my votes for the layout issues you have.

The issue is that if you position the .test div absolute inside another div with an absolute position without any dimension specified (height and width) you can't expect .test div to work with percentages because its parent element (.overview) is positioned absolute as well with no dimensions specified. So, I really think it's worth to remember what an absolute position means. Quote from W3Schools...

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is the html element

so, currently, if you set .test to absolute position its width will be 0 (zero) while .overview (its parent) has zero width and zero height. Understood? Zero height and zero width...which means there is no content vertically overflowing and therefore, the scrollbar plugin understands there's no need to display vertical scrollbars...because there is NO content vertically overflowing.

I hope it makes sense

Answer 2

The 100% width as mentioned in the comment will not work. It will simply disable your horizontal scroll bar. The trick needs another trick by segregating the classes.

.slideVerticalOnly .viewport .overview {
    width: 100%;
}

Add "slideVerticalOnly" class to the object with skin class e.g. "default-skin slideVerticalOnly"