Flex 1 : height is not fixed to remaining space - html

Question

I have a "boxHeader" which height is fixed to 64px and a "boxcontent" which I want height to be fixed to the remaining space.
My problem: if the height of the children in the "boxContent" exceed the height of the remaining space, it will also increase the height of "boxContent". And I don't want that, I want the children of "boxContent" to respect the max size (and add scroll)
Edit: The children inside "boxContent" are React Components, I have a "Sider" of Ant Design containing multiple Panel's Collapse AND I have a Content side by side. I want to add a scroll bar on the Sider AND on the Content so both Sider and Content have overflow-y: auto
Can you help me ?
Here the code
<div id="container">
<div id="boxHeader">
<HeaderArea />
</div>
<div id="boxContent">
{...}
</div>
</div>
#container {
display: flex;
flex-flow: column;
height: 100% !important;
min-height: 100% !important;
#boxContent {
/* height: calc(100vh - 64px); this works, but i don't want to calcule the size*/
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background: white;
}
#boxHeader {
flex: 0 0 64px;
}
body{
height: 100vh; /*100% is also tested*/
}

Answer 1

You can give #boxContent max-height and overflow-y: scroll with these two I think it is going to work. But If it is not can you add your HTML so that I can look and fix it. I hope this line of code fixes your problem.
#boxContent {
max-height:300px; //(for example)
overflow-y: auto;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background: white;
}