html - How can I use flexbox to create a horizontal scrolling image gallery where the image size is responsive up to a point

Question

I have a codepen showing where I've got to so far https://codepen.io/HightonRidley/pen/MWbWYgw

.flex-container {
    display: flex;
    overflow-x: auto;
    justify-content: left; 
    padding: 0;
    margin: 0;
    list-style: none; 
}

.flex-item {
    background: grey;
    padding: 5px;
    max-width: 350px;
    min-width:220px;
    margin-top: 10px;
    margin-left: calc(2px + 0.25vw);
    color: white;
    font-weight: bold;
    font-size:calc(10px + 0.25vw);
    text-align: center;
    flex: 1;
    overflow-y: hidden;
}
.myDiv {
    height:30px;
}
img {
    width: 100%; 
}

<div style="width:80%;margin-left:auto;margin-right:auto;"><ul class="flex-container">
  <li class="flex-item"><img src="https://i.ibb.co/KGW0dPQ/500x500px-test-image.jpg" alt="500x500px-test-image"><div class="myDiv">some text</div></li>
  <li class="flex-item"><img src="https://i.ibb.co/KGW0dPQ/500x500px-test-image.jpg" alt="500x500px-test-image"><div class="myDiv">some more text</div></li>
  <li class="flex-item"><img src="https://i.ibb.co/KGW0dPQ/500x500px-test-image.jpg" alt="500x500px-test-image"><div class="myDiv">lots of text lots of text lots of text</div></li>
  <li class="flex-item"><img src="https://i.ibb.co/KGW0dPQ/500x500px-test-image.jpg" alt="500x500px-test-image"><div class="myDiv">lots of text lots of text lots of textlots of text lots of text lots of text</div></li>
  <li class="flex-item"><img src="https://i.ibb.co/KGW0dPQ/500x500px-test-image.jpg" alt="500x500px-test-image"><div class="myDiv">lots of text lots of text lots of text</div></li>
  <li class="flex-item"><img src="https://i.ibb.co/KGW0dPQ/500x500px-test-image.jpg" alt="500x500px-test-image"><div class="myDiv">lots of text lots of text lots of textlots of text lots of text lots of textlots of text lots of text lots of text</div></li>
  <li class="flex-item"><img src="https://i.ibb.co/KGW0dPQ/500x500px-test-image.jpg" alt="500x500px-test-image"><div class="myDiv">lots of text lots of text lots of textlots of text lots of text lots of textlots of text lots of text lots of text</div></li>
  <li class="flex-item"><img src="https://i.ibb.co/KGW0dPQ/500x500px-test-image.jpg" alt="500x500px-test-image"><div class="myDiv">lots of text lots of text lots of textlots of text lots of text lots of textlots of text lots of text lots of text</div></li>
  <li class="flex-item"><img src="https://i.ibb.co/KGW0dPQ/500x500px-test-image.jpg" alt="500x500px-test-image"><div class="myDiv">lots of text lots of text lots of textlots of text lots of text lots of textlots of text lots of text lots of text</div></li>
  <li class="flex-item"><img src="https://i.ibb.co/KGW0dPQ/500x500px-test-image.jpg" alt="500x500px-test-image"><div class="myDiv">lots of text lots of text lots of textlots of text lots of text lots of textlots of text lots of text lots of text</div></li>
  <li class="flex-item"><img src="https://i.ibb.co/KGW0dPQ/500x500px-test-image.jpg" alt="500x500px-test-image"><div class="myDiv">lots of text lots of text lots of textlots of text lots of text lots of textlots of text lots of text lots of text</div></li>
  <li class="flex-item"><img src="https://i.ibb.co/KGW0dPQ/500x500px-test-image.jpg" alt="500x500px-test-image"><div class="myDiv">lots of text lots of text lots of textlots of text lots of text lots of textlots of text lots of text lots of text</div></li>
</ul>
</div>

question from:https://stackoverflow.com/questions/65947479/how-can-i-use-flexbox-to-create-a-horizontal-scrolling-image-gallery-where-the-i

Answer 1

Waitting for answers