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:

```css
.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%;
}
```

```html
<div class="container">
  <ul class="list">
    <li class="list-item">
      <div class="img-wrap">
        <img class="img" src="https://via.placeholder.com/150"/>
      </div>
    </li>
    <li class="list-item">
      <div class="img-wrap">
        <img class="img" src="https://via.placeholder.com/150"/>
      </div>
    </li>
    <li class="list-item">
      <div class="img-wrap">
        <img class="img" src="https://via.placeholder.com/150"/>
      </div>
    </li>
  </ul>
</div>
```

**EDIT**: Code snippet has been updated since original post