Fixed Table with Bootstrap

.html

<div class="container-fluid h-100 d-flex align-items-stretch bg-red">
	<div class="row">
		<div class="col-12 d-flex align-items-stretch bg-orange">
			<div class="row">
				<div class="col-3 bg-green">
					<div class="row d-flex flex-column h-100">
						<div class="col-12 bg-pink">filter</div>
						<div class="col-12 bg-blue">
							<table class="table">
								<thead>
									<tr>
										<th>id</th>
										<th>name</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>001</td>
										<td>pablo</td>
									</tr>
									<tr>
										<td>001</td>
										<td>pablo</td>
									</tr>
									<tr>
										<td>001</td>
										<td>pablo</td>
									</tr>
									<tr>
										<td>001</td>
										<td>pablo</td>
									</tr>
									<tr>
										<td>001</td>
										<td>pablo</td>
									</tr>
									<tr>
										<td>001</td>
										<td>pablo</td>
									</tr>
									<tr>
										<td>001</td>
										<td>pablo</td>
									</tr>
									<tr>
										<td>001</td>
										<td>pablo</td>
									</tr>
									<tr>
										<td>001</td>
										<td>pablo</td>
									</tr>
									<tr>
										<td>001</td>
										<td>pablo</td>
									</tr>
									<tr>
										<td>001</td>
										<td>pablo</td>
									</tr>
									<tr>
										<td>001</td>
										<td>pablo</td>
									</tr>
									<tr>
										<td>001</td>
										<td>pablo</td>
									</tr>
									<tr>
										<td>001</td>
										<td>pablo</td>
									</tr>
									<tr>
										<td>001</td>
										<td>pablo</td>
									</tr>
									<tr>
										<td>001</td>
										<td>pablo</td>
									</tr>
								</tbody>
								<tfoot>
									<tr>
										<td colspan="2">
											<button class="btn btn-secondary">1</button>
										</td>
									</tr>
								</tfoot>
							</table>
						</div>
					</div>
				</div>
				<div class="col-9 d-flex align-items-stretch bg-yellow">
					<div class="col-12">details</div>
				</div>
			</div>
		</div>
	</div>
</div>

.scss

html, body {
	height: 100vh;
	overflow: hidden;
}

table {
	height: 100%;
	display: flex;
	align-items: stretch;
	flex-direction: column;
	tbody {
		// height: 80%;
		display: block;
		overflow: auto;
	}
	thead, tbody tr {
		display:table;
		width:100%;
		table-layout:fixed;
	}
	thead {
		background-color: AliceBlue;
	}
	tfoot {
		background-color: Aquamarine;
	}
}

.bg {
	&-red { background-color: red; }
	&-green { background-color: green; }
	&-blue { background-color: blue; flex: 1; }
	&-orange { background-color: orange; overflow: hidden; }
	&-yellow { background-color: yellow; overflow: hidden; }
	&-pink { background-color: pink; flex: none; height: auto; }
}