How do I take the scrollbar into account with viewport width units?

Question

I am trying to develop a carousel similar to Netflix, but I cannot make it responsive. I have been using a codepen example:

Link to example

In this example, it has a hardcoded width and height. I would like to make it use a responsive measure (percentages). I wanted to use the vw viewport width units, but this doesn't work for me because it does not exclude the scrollbar. So, when I want every carousel item to have a width of 20vw (so that each one is 20% of the viewport size), they are always wider than I want because the viewport does not exclude the scrollbar.

How can I fix that problem?

Answer 1

I have made an example: Link

In this example, I want to show five items and showing an arrow on the right. The 6th item should be hidden behind the arrow, but the arrow width is not correct.

The width of every item is 18.4vw ( (100-8)/5=18.4). As you can see, I have put a padding on left and right with 4vw(so, I am subtracting 8 for total width), so, I have made the arrow layer with:

position:absolute;
right:0;
width:4vw;

In this manner, the arrow always is fixed to right.

The problem is that 18.4vw is the measure respect the viewport, and as there is a scrollbar, the width is not correct, because the scrollbar width is breaking the correct measure.

I dont know if you understand what I want to make.

BR.