Force image element to fill all available space

Question

I have a container that contains 2 p elements and 1 img element. I want the image to fill the whole available space.

So I tried using both height: 100% and flex: 1 but it did not do the job.

Why?

.x {
  display: flex;
  flex-direction: column;
  border: 3px solid red;
  height: 100vh;
}

.y {
  flex: 1;
height: 100%;
border: 3px solid green;
}

<div class="x">
  <p>safdadsfds</p>
  <p>gadfgdfgdf<p>
  <img class="y" src="https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg" />
</div>