上下布局：

<div class="container"><header class="header">头部内容</header><div class="content">内容区域</div>
</div>.container {display: flex;flex-direction: column;height: 100vh; /* 可视窗口高度，可根据需求进行调整 */
}.header {height: 100px; /* 头部高度，可根据需求进行调整 */background-color: #ccc;
}.content {flex-grow: 1; /* 填充剩余空间 */background-color: #f0f0f0;overflow-y: auto;
}

左右布局：

左侧定宽，右侧占据剩余剩余宽度。实现原理同上下布局。

<div class="container"><div class="left">左侧内容</div><div class="right">右侧内容</div>
</div>container {display: flex;
}.left {width: 200px; /* 左侧宽度 */background-color: #ccc;
}.right {flex-grow: 1; /* 填充剩余空间 */background-color: #f0f0f0;
}