Resize image height to match flex parent height

Question

I have an oversized image that I would like to adjust to the height of its parent but it keeps on adjusting the height of the parent to match the default image height. I cannot figure out what I'm doing wrong here. I need the image to obey the parent height, not the other way around.

Please see my code for a better understanding:

.container {
  height: 200px;
  border: 1px solid black;
}

.list {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.list-item {
  flex: 1;
  border: 1px solid black;
}

.img-wrap {
  height: 100%;
}

.img {
  height: 100%;
}

EDIT: Code snippet has been updated since original post

user_13824945 · Answer

You can simply add

 overflow:hidden;
 flex: 1;

to item

HTML

CSS

 .container {
  height: 400px;
  border: 1px solid black;
  width: 500px;
  display: flex;
  flex-direction: column;
}

.item {
  overflow:hidden;
  flex: 1;
  border: 1px solid black;
}

.item img {
  height: 100%;
  width: auto;
}

Try: https://jsbin.com/tejezuq/edit?html,css,output

user_770127 · Answer

~~height: 400px~~

.container {
  border: 1px solid black;
  width: 500px;
  display: flex;
  flex-direction: column;
}

.item {
  flex: 1 0 auto;
  border: 1px solid black;
}

.item img {
  height: 100%;
  width: auto;
}

Resize image height to match flex parent height

2 Answers