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

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 >
  <div >
    <img  src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false">
    <img  src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false">
    <img  src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false">
    <img  src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false">
    <img  src="https://picsum.photos/id/235/274/183" alt="generically good looking image" draggable="false">
    <img  src="https://picsum.photos/id/235/274/183" alt="generically good looking image" draggable="false">
    <img  src="https://picsum.photos/id/235/274/183" alt="generically good looking image" draggable="false">
    <img  src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false">
    <img  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 collumn and using flex wrap, removing the align-self, and nothing seems to be working. I tried changing how the images are sized aswell 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

CodePudding user response：

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 >
  <div >
    <img  src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false">
    <img  src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false">
    <img  src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false">
    <img  src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false">
    <img  src="https://picsum.photos/id/235/274/183" alt="generically good looking image" draggable="false">
    <img  src="https://picsum.photos/id/235/274/183" alt="generically good looking image" draggable="false">
    <img  src="https://picsum.photos/id/235/274/183" alt="generically good looking image" draggable="false">
    <img  src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false">
    <img  src="https://picsum.photos/id/235/275/183" alt="generically good looking image" draggable="false">
  </div>
</div>

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

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