Increase width when scroll bar

[Andrew Poulos]

Say I have a div with

display:flex
flex-direction: column;
width: 40px
overflow-y: auto
max-height: 100%
box-sizing: border-box;

containing a column of items. Once the number of items exceeds the
max-height a scroll bar appears. The scroll bar takes some of the 40
pixel width of the div.

How can I code it so that if a scroll bar needs to appear the width of
the div increases by at least the width of the scroll bar? As the div's
items are relatively small I don't want nearly half their width covered
by a scroll bar.

Andrew Poulos

[😉 Good Guy 😉]

Re: Increase width when scroll bar

On 18/02/2021 11:09, Andrew Poulos wrote:

 

How can I code it so that if a scroll bar needs to appear the width of the div increases by at least the width of the scroll bar? As the div's items are relatively small I don't want nearly half their width covered by a scroll bar.

How about making the scroll-bar thin like so:

            
                .scroll {
                    scrollbar-width: thin;
                }
            
        

Then attach that style to the div.

scroll-bar hasn't got a width and the committee is is still debating about it. So you are at the mercy of the browser used by the user/customer.

--

With over 1.2 billion devices now running Windows 10, customer satisfaction is higher than any previous version of windows.

[Andrew Poulos]

On 19/02/2021 8:19 am, Good Guy wrote:
>
> Re: Increase width when scroll bar
>
> On 18/02/2021 11:09, Andrew Poulos wrote:
>>
>> How can I code it so that if a scroll bar needs to appear the width of
>> the div increases by at least the width of the scroll bar? As the
>> div's items are relatively small I don't want nearly half their width
>> covered by a scroll bar.
>
> How about making the scroll-bar thin like so:
>
> |.scroll { scrollbar-width: thin; } |
>
>
> Then attach that style to the div.
>
> scroll-bar hasn't got a width and the committee is is still debating
> about it. So you are at the mercy of the browser used by the user/customer.

Google suggests my issue is not uncommon. A pity there isn't a style to
show the scroll bar outside the boundary of a div but I guess it creates
more issues than it solves.

I've set a "thin" scroll bar and allowed for space to the side of the
div's contents for a scroll bar to appear and not cover the contents
and, to balance it, I've included the same size space on the opposite
side. Not ideal but workable.

Andrew Poulos