<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>
.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%; 
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.