Flexbox image height resize - css

Question

I'm having trouble getting my images to resize fully.
Ideally I want the image to resize so that the option fits the screen, currently it only fits the width, why so? Is it possible to get the behavior I wish by just using css, maybe a media query is needed? Scorched over google trying to find a similar problem, but no luck!
Thanks in advance!
UPDATE:
To clarify, my problem is that the image is not resized, if the height of the window gets small enough - the header disappears and I get a scroll bar. I want all of the content to scale down, so that no scroll bar is needed.
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: aqua;
}
.content {
display: flex;
overflow-x: auto;
flex: 2 1 auto;
flex-wrap: nowrap;
}
.content::-webkit-scrollbar {
display: none;
}
.option {
display: flex;
flex-direction: column;
margin: auto 1em;
width: 90%;
height: 70%;
text-align: justify;
border: 3px solid black;
}
.img {
flex: 1;
}
.title {
flex: 0;
font-weight: bold;
text-align: center;
flex: 1;
margin: auto;
}
.desc {
flex: 0;
}
.header {
flex: 2;
text-align: center;
background-color: red;
}
.footer {
flex: 1;
background-color: brown;
}
<div class="container">
<div class="header">
Fusce pellentesque ante.
</div>
<div class="content">
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Proin hendrerit.</p>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla non lacus tincidunt suscipit. Nam nec arcu a erat convallis.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Nullam at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut congue eros. Aenean sit amet quam efficitur, lacinia ligula ac.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Sed nec.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor nisi mauris, ac interdum tellus pulvinar id. Morbi non molestie</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Morbi in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non rutrum arcu, ac posuere odio. Nunc in dolor eget nisi.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Mauris ac.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar orci non consectetur accumsan. Aenean posuere, felis commodo congue pulvinar.</p>
</div>
</div>
<div class="footer">
<p>Quisque venenatis volutpat dictum. Praesent.</p>
</div>
</div>
Fiddle

Answer 1

Hope this is what you want. If this is the right answer! Here is what i did.
give the container class of height and width a 100% and set display to flex and flex-direction: column so header, footer and content class get aligned vertically.
Now, if you set content class flex prorperty to 1 it will take rest of width and height.
give option class a property of display: flex and set flex-direction: column so image and the title and description get aligned vertically.
by assign min-height of 30px to the title and p in the options, rest of the space can be assigned to image, which I hope is what you want.
* {
margin: 0;
padding: 0;
}
.content {
min-height: 100%;
width: 100%;
min-width: 100%;
display: flex;
flex-direction: row;
box-sizing: border-box;
padding: 30px 0;
}
.content .option {
flex: 1;
max-height: 100vh;
min-width: 100%;
display: flex;
flex-direction: column;
}
.content .option img {
height: calc(100% - 160px);
width: 100%;
}
.content .option p {
height: 20px;
}
.content .option p:nth-child(2) {
height: 40px;
}
.header,
.footer {
position: fixed;
left: 0;
right: 0;
background-color: #ccc;
height: 30px;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
<div class="container">
<div class="header">
Fusce pellentesque ante.
</div>
<div class="content">
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Proin hendrerit.</p>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla non lacus tincidunt suscipit. Nam nec arcu a erat convallis.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Nullam at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut congue eros. Aenean sit amet quam efficitur, lacinia ligula ac.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Sed nec.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor nisi mauris, ac interdum tellus pulvinar id. Morbi non molestie</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Morbi in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non rutrum arcu, ac posuere odio. Nunc in dolor eget nisi.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Mauris ac.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar orci non consectetur accumsan. Aenean posuere, felis commodo congue pulvinar.</p>
</div>
</div>
<div class="footer">
<p>Quisque venenatis volutpat dictum. Praesent.</p>
</div>
</div>

Answer 2

html,
body {
padding: 0;
margin: 0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
background-color: aqua;
justify-content: space-between;
}
.header,
.footer {
flex: 0 1 auto;
text-align: center;
}
.content {
display: flex;
overflow-x: auto;
flex-wrap: nowrap;
flex: 1 1 auto;
}
.footer {
background-color: brown;
}
img {
max-width: 600px;
}
<div class="container">
<div class="header">
Fusce pellentesque ante.
</div>
<div class="content">
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Proin hendrerit.</p>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla non lacus tincidunt suscipit. Nam nec arcu a erat convallis.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Nullam at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut congue eros. Aenean sit amet quam efficitur, lacinia ligula ac.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Sed nec.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor nisi mauris, ac interdum tellus pulvinar id. Morbi non molestie</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Morbi in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non rutrum arcu, ac posuere odio. Nunc in dolor eget nisi.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Mauris ac.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar orci non consectetur accumsan. Aenean posuere, felis commodo congue pulvinar.</p>
</div>
</div>
<div class="footer">
<p>Quisque venenatis volutpat dictum. Praesent.</p>
</div>
</div>