Flex cuts off child items - html

Question

I have the following code structure
.parent {
display: flex;
flex-direction: column;
}
.img {
width: 100%
}
.content {
flex: 1;
overflow-y: scroll;
}
.container {
border: 1px solid;
display: flex;
flex-direction:column;
margin:20px;
}
<div class="parent">
<img src="https://www.everythingcarers.org.au/media/1982/sample.jpg"/>
<div class="content">
</div>
<div class="footer">
<div class="container">
<div><button>Button1</button><div>
<div><button>Button2</button><div>
</div>
</div>
</div>
What I want is the footer to occupy its original width and height(height: 144px) , and make the content scrollable based on the available space according to screen resolution.Currently, the footer is getting cut off on some screens. I've tried changing the flex values for content and footer, but it doesn't work.Thanks

Answer 1

If you want to limit your parent to the height of the screen so the footer is always visible, you need to set a height of 100% on your div (and body and html) and also move the image inside your content container (or have a seperate one that will scroll if it too large for the screen)
body,
html {
margin: 0;
height: 100%;
}
.parent {
height: 100%;
display: flex;
flex-direction: column;
}
img {
display:block;
width: 100%
}
.content {
flex: 1;
overflow-y: scroll;
}
.container {
border: 1px solid;
display: flex;
flex-direction: column;
margin: 20px;
}
<div class="parent">
<div class="content">
<img src="https://www.everythingcarers.org.au/media/1982/sample.jpg" />
</div>
<div class="footer">
<div class="container">
<div><button> Button1 </button></div>
<div><button> Button2 </button></div>
</div>
</div>
</div>

Answer 2

I think setting your parent height to 100vh and giving your footer a fixed height should fix it:
https://codepen.io/chrishalley/pen/zbwRMw
body {
margin: 0;
}
.parent {
display:flex;
flex-direction:column;
background-color: orangered;
height: 100vh;
}
.content {
flex: 1;
overflow-y: scroll;
}
img {
width: 300px;
}
.footer {
height: 144px;
}