<div class="wrapper">
  <img src="https://placekitten.com/400/400" alt="">
  <img src="https://placekitten.com/400/400" alt="">
  <img src="https://placekitten.com/400/400" alt="">
</div>

<h2>Learning:</h2>
<ul>
  <li>When there's not enough space for all images to fit full inside flex container, there would be an overflow.</li>
  <li>Try adding <code>min-width: 0</code> to the image element, and see how images will fit nicely to occupy equal space as expected.
</ul>
.wrapper {
  display: flex;
  width: 800px;
  border: 2px solid;
}
img {
  flex: 1;
}

/* for appearance */
html {
  font-size: 125%;
  font-family: Tahoma;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.