images going out of scope of parent container

Question

I have a div that contains images that are spaced around. The problem is the more images I add to that div the images that are in the first position go out of the scope of the main container div. I have added the table-responsive class to make the main container scrollable but the images at the first position are out of scope so I can't even scroll and see the image at the first position. How can I fix it so that the images don't go out of the scope of the parent container? To see that the first image is different delete some of the images in that container and you will see that the image is indeed there. Any help is appreciated. Thanks in advance.

.infoBar {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: absolute;
  top: 15%;
  width: auto;
  height: 10%;
  max-width: 95%;
  column-gap: 25px;
  background-color: green;
}

.infoBar::-webkit-scrollbar {
  display: none !important;
}

.infoBar .imgWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 20%;
  cursor: pointer;
}

.infoBar .imgWrap img {
  height: 100%;
  cursor: pointer;
}

user_10416225 · Answer

Bootstrap is messing with your css, I would advise you to read carefully the doc about each class and what they do before using it.

With css only you can achieve what you're trying to do (if I understood correctly):

as many images as you want
all images at given size in the container
horizontal scroll
space between each images

.infoBar {
  display: flex;
  flex-direction: row;
  max-width: 95%;
  height: 160px;
  margin: auto;
  column-gap: 25px;
  background-color: green;
  overflow-x: auto;
}

.infoBar .imgWrap {
  height: 100%;
  cursor: pointer;
}

.infoBar .imgWrap img {
  height: 100%;
  cursor: pointer;
}

images going out of scope of parent container

1 Answers