Flexbox: Collapse When Screen Too Small - How To?

Question

I want to implement two images in my website that will be shown side-by-side as long as the screen is wider than, let's say, 600px but collapse when there is less width available (like on a smartphone).

.imgrid {
  display: flex;
  flex-flow: row wrap;
}

.img {
  flex: 1;
}

.img img {
  max-width: 100%;
}

<section class="imgrid">
  <div class="img">
    <img src="http://via.placeholder.com/500x500" />
  </div>
  <div class="img">
    <img src="http://via.placeholder.com/500x500" />
  </div>
</section>

.imgrid has the flex-flow: row wrap so that it will wrap when there's not enough space to display both items on the same line. So the idea here is that it will naturally collapse once there's not enough screen-width available.

.img's flex: 1; however, stops that from happening as the images will be scaled to be the same size and share the width of the line.

I've added a media query but I don't know what to make it do. Ideally I would simply remove the flex: 1 but I don't think that's possible.

How do I go about achieving this effect without reverting to the use of px? I mean the flex wrapping is a really elegant way of doing things and I would assume there's a very natural way of achieving this?

Answer 1

You can add media query in case when screen is smaller than 600px. Demo:

.imgrid {
  display: flex;
  flex-flow: row wrap;
}

.img img {
  width: 100%;
}

/* add media query for growing and shrinking */
@media (max-width: 600px) {
  .img {
    flex: 1 1 auto;
  }
}

<section class="imgrid">
  <div class="img">
    <img src="http://via.placeholder.com/500x500" />
  </div>
  <div class="img">
    <img src="http://via.placeholder.com/500x500" />
  </div>
</section>