Why are my flex-items outside of the flex-box?

Question

I'm trying to make a flexbox that has the width of the page, and there are all the flex-items aligned in a row, then the user can scroll to see the overflowed items. I have all of this done, except that the flex items further towards the start of the flexbox will be clipped outside of the page

Codepen : https://codepen.io/hellothisisme123/pen/JjBovLX

 html, body { padding: 0; margin: 0; }.container { display: flex; align-items: center; }.image_container { display: flex; flex-wrap: nowrap; height: 80%; min-width: 100%; align-items: flex-start; justify-content: center; overflow-x: scroll; box-sizing: border-box; padding: 0; gap: 3%; /* margin: 10%; */ }.image_container>.funky_image { align-self: flex-start; height: 80vh; aspect-ratio: 5 / 6; /* padding: 2%; */ filter: drop-shadow(0 0 3px #000); box-sizing: border-box; overflow: hidden; --position: 50%; object-position: var(--position) 50%; object-fit: cover; flex-shrink: 0; }

 <div class="container"> <div class="image_container"> <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/274/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/274/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/274/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false"> </div> </div>

I've tried removing the padding on the images and using gap, changing the flex direction to column and using flex wrap, removing the align-self, and nothing seems to be working. I tried changing how the images are sized as well and nothing seems to be working and I have no clue how to fix this. Thank you for helping

UPDATE: I removed the justify-content: center; and that fixed it

Answer 1

Try removing the justify-content: center; from your.image_container class

 html, body { padding: 0; margin: 0; box-sizing: border-box }.container { display: flex; align-items: center; }.image_container { display: flex; flex-wrap: nowrap; height: 80%; min-width: 100%; align-items: flex-start; overflow-x: scroll; box-sizing: border-box; padding: 0; gap: 3%; /* margin: 10%; */ }.image_container>.funky_image { align-self: flex-start; height: 80vh; aspect-ratio: 5 / 6; /* padding: 2%; */ filter: drop-shadow(0 0 3px #000); box-sizing: border-box; overflow: hidden; --position: 50%; object-position: var(--position) 50%; object-fit: cover; flex-shrink: 0; }

 <div class="container"> <div class="image_container"> <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/274/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/274/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/274/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false"> </div> </div>

Answer 2

To create horizontal overflowing of a container, it needs to have a defined width . width: auto , as it is the default if not defined, won't let you create an overflow.

Answer 3

You can either: remove the "justify-content: center" in.image-container or: add "overflow: auto" in.container and remove "min-width" and "scroll" props from.image-container

Answer 4

You need to change justify-content: center; to flex-start in image container.

Answer 5

Make the.funky-images width:100%;

 html, body { padding: 0; margin: 0; }.container { display: flex; align-items: center; }.image_container { display: flex; flex-wrap: nowrap; height: 80%; min-width: 100%; align-items: flex-start; justify-content: center; overflow-x: scroll; box-sizing: border-box; padding: 0; gap: 3%; /* margin: 10%; */ }.image_container>.funky_image { align-self: flex-start; height: 80vh; aspect-ratio: 5 / 6; /* padding: 2%; */ filter: drop-shadow(0 0 3px #000); box-sizing: border-box; overflow: hidden; --position: 50%; object-position: var(--position) 50%; object-fit: cover; flex-shrink: 0; width:100%; }

 <div class="container"> <div class="image_container"> <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/274/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/274/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/274/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false"> <img class="funky_image" src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false"> </div> </div>