Flex container strangely places inner elements

I'm trying to make some slider with full width of page size. I`m trying to use some flex boxes.

.sliderContainer {    width: 100%;    display: flex;    align-items: flex-start;    position: relative;    overflow: hidden;}.sliderItem {    width: 100vw;    position: relative;    flex-shrink: 0;}

<div class="sliderContainer"><div class="sliderItem">          element</div><div class="sliderItem">          element</div></div>

In UI it looks something like this:how it is shown

Moreover, if I change the value of overhidden to auto, the horizontall scroll bar won`t be in the left, but somewhere in the middle. here is an image: enter image description here

How should I properly place it?

I'm expecting the slider with size of whole page width. But now I've got some problems with placing that divs and giving them propriate css properties' values.

I've tried not to use the flexes, tried to manually scroll it and lots of more