【html】通用布局模式，让容器充满父元素，且center部分始终充满剩余空间，可无限嵌套

源码采用vue3写法实现：Panel.vue

<!--专用于布局的面板，可以无限嵌套，核心思想是保证center部分充满整个剩余空间-->
<template>
	<div class="container">
		<div class="top">
			<slot name="top" />
		</div>
		<div class="middle">
			<div class="left">
				<slot name="left" />
			</div>
			<div class="center">
				<slot name="center" />
			</div>
			<div class="right">
				<slot name="right" />
			</div>
		</div>
		<div class="bottom">
			<slot name="bottom" />
		</div>
	</div>
</template>

<script setup></script>

<style scoped lang="scss">
.container {
	//border: 1px solid red;
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;

	.middle {
		flex: 1;
		overflow-y: auto;

		display: flex;
		flex-direction: row;

		.center {
			flex: 1;
			overflow-y: auto;
		}
	}

	.top,
	.bottom {
		flex-shrink: 0;
	}
}
</style>