Scrollbar not showing when chidren's height set in %

[sylvainjule]

Hi,
I'm having some hard time trying to make the bar appear when used inside a list,
with its li children's height set as 33.33333% (and 4+ li in a column).
The overflow isn't detected, the scrollbar doesn't show.
When set in px, no problem at all.

Here is a fiddle of the issue :
http://jsfiddle.net/sylvainjule/zwL0pLng/4/

I currently get it working by previously formatting the height with jQuery :
http://jsfiddle.net/sylvainjule/n3h01tvx/46/

But wonder if the issue has already shown up / there is a cleaner fix ?

[gromo]

Hi @sylvainjule

This behavior is really strange and unexpected for me. I mark this as bug and will try to inspect and fix problem in next few days.

[gromo]

@sylvainjule

Hi, sorry for delay. Unfortunately I am extremely busy these days and cannot look at this issue now, but I don't forget about it.

[sylvainjule]

No problem at all ! Thanks for looking into it.

[gromo]

I have reviewed your example. I'm afraid I cannot fix it. Unfortunately (I don't know why), children's height in % does not work if parent's height is set to auto (regardless of min-height/max-height values/actual element height), but I need height:auto because of negative margins that hides native browser scrollbars. So your hack/fix is the best possible option for now.

[arturparkhisenko]

@gromo i think same problem with flexbox layouts.. can you fix it?
related to % height malihu/malihu-custom-scrollbar-plugin#68

[gromo]

@arturparkhisenko I will look at it in next few days

[gromo]

@arturparkhisenko

jQuery scrollbar was easily applied to flexbox container. example on jsFiddle.net: http://jsfiddle.net/6Yrkr/19/

[arturparkhisenko]

@gromo thanks for check, maybe its just rare case.
example: http://jsbin.com/guqivezejo/9/edit?html,output
before applying: all working fine and like it should be! (you can comment script and see that);
after applying plugin: scrollbar dissapears and padding of applied element is 0.

[gromo]

@arturparkhisenko What about CSS class for scrollbar?

[arturparkhisenko]

@gromo yep, my bad, forgot it 💡 Thanks!
But i found another problem with a paddings: i cant scroll to the end, and also i cant see the content that behind a paddings, example: https://jsfiddle.net/Lfohe21a/
I can fix it only by adding important here: box-sizing: border-box !important;
In default stylesheet i found that:
.scroll-wrapper > .scroll-content { box-sizing: content-box !important; }

[arturparkhisenko]

@gromo Спасибо за OSS! 👍 Merry Christmas, и с наступающим Новым Годом! 🎅🎄🎉🏂🎿🎁
Потому что: https://twitter.com/cssunderhood/status/680383777516969985