images going out of scope of parent container-CodePudding

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;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<!-- the more .imgWrap div I add to .infoBar the images at the first position goes out of scope of .info bar and can even scroll back to it-->

<div  id="infoBar">
  <div ><img src="https://source.unsplash.com/user/c_v_r/1900x800"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
</div>

CodePudding user response：

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;
}

<!-- the more .imgWrap div I add to .infoBar the images at the first position goes out of scope of .info bar and can even scroll back to it-->

<div  id="infoBar">
  <div >
    <img src="https://source.unsplash.com/user/c_v_r/1900x800">
  </div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
  <div ><img src="https://picsum.photos/200/300"></div>
</div>