How make a list of images responsive inside a flexbox container using all available height

Question

I want to create a list of images that will fill the whole height of the side panel of my app. But I want the images to be responsive too. I was able to make the images responsive, the problem is that the side panel won't shrink for the resized images width.

Here a example in CodePen so you can play with the container height: https://codepen.io/guilhermeaiolfi/pen/bGvBdpG

 html, body { height: 100%; margin: 0; } .app .left-side { } .app .right-side { margin: 10px; } .app { display: flex; flex: 1; height: 100%; flex-direction: row; } .zoom__images { border: 1px solid black; height: 100%; display: flex; flex-direction: column; justify-content: center; } .zoom__images > * { flex: 1 0 0; min-height: 0; display: flex; } .zoom__images img { max-height: 100%; margin-left: auto; margin-right: auto; }

 <div class="app"> <div class="left-side"> <div class="zoom__images"> <div><img src="https://via.placeholder.com/400x400/a00/fff"></div> <div><img src="https://via.placeholder.com/400x400/a00/fff"></div> <div><img src="https://via.placeholder.com/400x400/a00/fff"></div> <div><img src="https://via.placeholder.com/400x400/a00/fff"></div> <div><img src="https://via.placeholder.com/400x400/a00/fff"></div> <div><img src="https://via.placeholder.com/400x400/a00/fff"></div> <div><img src="https://via.placeholder.com/400x400/a00/fff"></div> </div> </div> <div class="right-side"> content </div> </div>

The images size (both height and width) are being properly handled when the .left-side height changes, but the left-panel width is always 400px wide when it should be the size of the images inside it.

Thanks.

Answer 1

i think you want like this

html, body {
  height: 100%;
  margin: 0;
}

.app {
  display: flex;
}

.left-side {
  background:red;
  flex: 1;
}

.left-side .zoom__images div img{
  width: 100%;
}

.right-side {
  flex: 1
}