wrap a flexbox to allow maximum child scaling, while preserving aspect ratios

Question

I'd like to display images in a row, using a flexbox container. In order to play nicely with the other elements onscreen, the container must have a height of exactly 30vh.
The images inside should be scaled as large as possible, while keeping their aspect ratio and not overflowing the row.
The problem is wrapping. On a very wide screen, the images should all be in one row. But on a tall screen, the row should wrap automatically. This is something I can't manage to do. Either the elements in the flexbox shrink to fit, or they wrap around. But I can't get the to wrap and scale at the same time.

Is it possible to do this with flexbox? Here's my approach so far. I'm using scss:

.App {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: yellow;
}
.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  background-color: blue;
  height: 30vh;
}

.item {
  // make items grow
  flex-basis: 0;
  flex: 1;

  // only as large as necessary
  width: max-content;
  height: max-content;

  // align image and text
  display: flex;
  flex-direction: column;
  align-items: center;

  // just a visual helper
  background-color: red;
  border-style: solid;
}

img {
  // make image shrink to fit
  min-width: 0;
  min-height: 0;

  // contain in parent
  max-height: 100%;
  max-width: 100%;

  // keep aspect ratio
  width: auto;
  height: auto;
}

A minimal fiddle: https://jsfiddle.net/89jekw4p/8/

Here's a screenshot that illustrates the problem. These images could be much larger, if the row would wrap around:

Take a look at this: https://stackoverflow.com/questions/44482120/how-to-change-flexbox-wrap — GucciBananaKing99, Mar 11 '21 at 19:12

score 0 · Answer 1 · answered Mar 13 '21 at 19:20

I might have an idea what is the solution to your problem. First of all, I removed // make image shrink to fit min-width: 0; , min-height: 0; // contain in parent max-height: 100%; max-width: 100%; // keep aspect ratio width: auto; height: auto;. Because when you have written repeatedly browser only sees what's written on the end of the line so the browser only seeing the width: auto; height: auto; so that is why images keep getting smaller and flex-wrap: wrap does not work. But right now it will work. I hope I could explain it.

 <div class="App">
    <div class="row">
        <div class="item">
            <img src="https://www.fillmurray.com/200/300"></img>
        </div>
        <div class="item">
            <img src="https://www.fillmurray.com/200/300"></img>
        </div>
        <div class="item">
            <img src="https://www.fillmurray.com/200/300"></img>
        </div>
        <div class="item">
            <img src="https://www.fillmurray.com/200/300"></img>
        </div>
        <div class="item">
            <img src="https://www.fillmurray.com/200/300"></img>
        </div>
    </div>
</div>


.App {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: yellow;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  flex: 0 0 100%;
  background-color: blue;
  height: 30vh;
}

.item {
  height: 30vh;
  width: auto;
}

img {
  max-width: 100%;
  height: 30vh;
}

wrap a flexbox to allow maximum child scaling, while preserving aspect ratios

1 Answers1