上下布局：

<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;
}