I have been working on a website with horizontal scrolling sections, using only CSS to achieve this effect. Currently, I am rotating the container to create a more 'natural' horizontal scrolling experience. However, I would like to adjust the width of the container based on the images it contains so that users cannot scroll beyond the images themselves. Below is my HTML and CSS code:
.slide {
height: 80vh;
background-size: auto 100vh;
background-repeat: repeat-x;
width: 2000vw;
}
.wrapper {
display: flex;
flex-direction: row;
width: 2000vw;
transform: rotate(90deg) translateY(-80vh);
transform-origin: top left;
}
.outer-wrapper {
width: 80vh;
height: 100vw;
transform: rotate(-90deg) translateX(-80vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
scrollbar-width: none;
-ms-overflow-style: none;
}<div *ngIf="ready" class="container-fluid" id="projects">
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide one">
<img *ngFor="let image of images" class="img-fluid" [src]="image">
</div>
</div>
</div>
</div>Despite trying various combinations of CSS properties, I haven't found a solution that works consistently across different screen sizes.