1

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

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Slinkyartist
  • 21
  • 3
  • 2
    Please add you code to the question body as text / stack snippet and not in an external site. – ATP Dec 21 '22 at 13:20

5 Answers5

2

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>
Parit Sawjani
  • 729
  • 8
  • 24
2

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

Shavlego Botchorishvili
  • 61
  • 3
1

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.

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • I just tried and it didn't work, the items at the start are still clipped – Slinkyartist Dec 21 '22 at 13:24
  • With `justify-content: center;`, yes (your codepen link was still wrong when I answered, so I didn't see your code). That won't work at all – you'd have to create a fixed width container, additionally a wrapper container around that and center the flex container inside the wrapper using `position: relative; left: 50%; transform:translateY(-50%);` on the flex container. Then the flex container could scroll insider the wrapper. – Johannes Dec 21 '22 at 13:30
  • so I tried this, and it did center them correctly, but there are still 3 images that are outside of the flex container and they can't be seen. I saved it to the codepen and hopefully you can see the changes because I might've misunderstood those directions new link potentially unnecessary: https://codepen.io/hellothisisme123/pen/JjBovLX – Slinkyartist Dec 21 '22 at 13:50
1

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 to make the image container take its children's width, and have the outer container handle the scroll

*Here:Change justify-content value when flex items overflow container a similar issue was discussed, where "justify-content: center" also have caused alignment issues.

Ravid
  • 311
  • 3
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 23 '22 at 05:09
0

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>
Faiz Sulistiyo
  • 11
  • 2