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;
}

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.

user_17733614 · Answer

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
}

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

1 Answers