Fill available height, then scroll when no more room - css

Question

I would like two elements (divs) in a column. The first has a fixed height, and the second I want to fill all remaining height. If the content of the second element exceeds the space left, I want to scroll its contents, and not have the second element take up more space (which causes the parent to scroll).
Image (current)
For example, the "first element" is the search bar in this photo. Fixed height, and remains on top.
The "second element" is the data table. As you can see at the bottom, the table contents extend the height of the page, and the entire page becomes scrollable. This is not what I am looking for.
Image (desired) I would like the table container to behave similarly to this red box. It fills it's remaining height, and when it contains content that overflows, I would like just that element to scroll. Only scroll the content within the confines of the red box.
I have seen many examples similar to this, but all of them have a specified height for the "second element", even if it is a vh property. vh doesn't work for me since the 100% isn't the entire viewport.
I've been using flexbox to try and achieve this, and I get close, but I've only ever been able to either specify a height for the "second element", or have it grow to fill available space, but then exceed it, and overflow the whole container.
The below code is very close to desired behavior, except when the viewport becomes to small, "box 2" goes off screen and the whole thing scrolls, I want the content in "box 2" to scroll.
html,
body {
height: 100%;
}
.container {
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
.box {
text-align: center;
color: white;
font-family: sans-serif;
font-size: 36px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
.box-1 {
background-color: green;
height: 60px;
}
.box-2 {
background-color: blue;
flex: 1;
}
<div class="container">
<div class="box box-1">box 1</div>
<div class="box box-2">box 2</div>
</div>

Answer 1

Just apply an overflow:auto on the second div and a max-height to the container.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.container {
max-height: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.box {
text-align: center;
color: white;
font-family: sans-serif;
font-size: 36px;
padding: 20px;
justify-content: center;
}
.box-1 {
background-color: green;
height: 60px;
}
.box-2 {
background-color: blue;
flex: 1;
overflow: auto;
}
.expando {
height: 1000px;
/* for demo */
}
<div class="container">
<div class="box box-1">box 1</div>
<div class="box box-2">box 2
<div class="expando"></div>
</div>
</div>

Answer 2

html,
body {
height: 100%;
margin: 0;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.box {
text-align: center;
color: white;
font-family: sans-serif;
font-size: 36px;
padding: 20px;
}
.box-1 {
background-color: green;
height: 60px;
}
.box-2 {
background-color: blue;
height: 100%;
overflow: auto;
}