How do I get a div to overflow and not extend the page using flex box? - vue.js

Question

Here is my code:
<template>
<div class="main-column d-flex flex-column h-100">
<div class="pl-3 pr-3">
<filter-panel ref="filterComp" :controls="filterControls" :urlParams="$route.query" #filterResults="onSearchClicked" />
</div>
<div class="flex-grow-1 d-flex flex-column px-1 py-2 bg-container">
<div class="position-relative h-100">
<div class="absoluteFill">
<div class="collapse-panel nested-background mb-2 w-100">
<div class="collapse-bar full-length">
<b-button class="buttonRow w-100 py-0 d-flex justify-content-between" size="sm" variant="link" #click="hideGraphs = !hideGraphs" v-b-toggle.count-collapse>
<span class="title">Chart</span>
<icon :class="{'down': hideGraphs}" class="icon rotate mt-1" icon="chevron-up" size="lg" />
</b-button>
</div>
<b-collapse id="count-collapse" visible>
<transition name="fade" mode="out-in">
<div>
<DxChart :data-source="graphData"
palette="Material"
class="p-3">
<DxCommonSeriesSettings type="bar" argument-field="date">
<DxLabel>
<DxFormat :precision="0" type="fixedPoint" />
</DxLabel>
</DxCommonSeriesSettings>
<DxSize :height="350" />
<DxSeries name="Mapping Client"
value-field="mappingClient"
color="#a4de02" />
<DxSeries name="Mapping ISCI"
value-field="mappingIsci"
color="#add8e6" />
<DxSeries name="Mapping Product"
value-field="mappingProduct"
color="#ff0000" />
<DxLegend :visible="true" />
<DxTooltip :enabled="true" />
</DxChart>
</div>
</transition>
</b-collapse>
</div>
<!--Grid card-->
<div class="collapse-panel nested-background mb-2 d-flex flex-column w-100 ">
<div class="collapse-bar full-length">
<b-button class="buttonRow w-100 py-0 d-flex justify-content-between" size="sm" variant="link" #click="hideGrids = !hideGrids" v-b-toggle.counts-collapse>
<span class="title">Grids</span>
<icon :class="{'down': hideGrids}" class="icon rotate mt-1" icon="chevron-up" size="lg" />
</b-button>
</div>
<b-collapse id="counts-collapse" visible>
<transition name="fade" mode="out-in">
<dx-tab-panel ref="tabPanel" :items="tabs">
<div slot="title" class="wordwrap" slot-scope="tab">{{tab.data.title}}</div>
<div slot="item" slot-scope="tab">
<span v-if="isTab(tab, 0)">
<data-summary :graphData="graphData"></data-summary>
</span>
<span v-if="isTab(tab, 1)"><user-data :rawData="rawData"></user-data></span>
</div>
</dx-tab-panel>
</transition>
</b-collapse>
</div>
</div>
</div>
</div>
</div>
I need the last table to have an overflow inside the div and not scroll the page. I also need that div to expand if the chart is minimized. I have been trying to solve this all day I'm out of answers, I feel like this should be a super simple fix but I just can't get it.
Thanks for any help!