CODEWITHSUNDEEP
csshtmlflexbox
AwwYsss
AwwYsss

Reputation: 119

Display flex children to auto resize to fit parent element

I want to make a listing for images and resize them to fit the window if more are added for it not to expand the parent div.

Can that be done using css display:flex option or any other way?

Here's my fiddle

Css for image holding div and it's children

.images{
    background:rgba(14, 11, 10, 0.8);
    display:flex;
    flex:10;
}

.images > img{
     flex:1;
     max-width:100%;
     max-height:100%;
}

as you see in the example the image height is not resizing,how can i fix this problem?

Upvotes: 5

Views: 25057

Answers (3)

Aminah Nuraini
Aminah Nuraini

Reputation: 19146

Try using flex-direction: column;

.images{
  background:rgba(14, 11, 10, 0.8);
  display:flex;
  flex-direction: column;
  flex:10;
}

Upvotes: 0

Felix A J
Felix A J

Reputation: 6470

Add each images inside seperate divs, and change style accordingly

.images img{
  flex:1;
  max-width:100%;
  max-height:100%;
}

Upvotes: 4

Simon Rook
Simon Rook

Reputation: 205

what exactly are you trying to do here? do you want the image to stretch to just the width of the parent div? in which case this is what you should do:

.images{
    background:rgba(14, 11, 10, 0.8);
    display:block;
    flex:10;
}
.images img{
    width:100%;
}

or do you want the images to stretch to both the width and the height of the parent? in which case you should add an extra height 100% to the image.

Upvotes: 0

Related Questions