在網頁設計中，經常會遇到上下兩欄布局的情況，其中一欄要求固定高度。這個需求可以通過CSS來實現。

.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
.main {
flex: 1;
overflow-y: auto;
}
.sidebar {
height: 300px;
}

首先，我們將容器設置為彈性布局。在這里，我們將容器的高度設置為視窗的高度，這樣可以確保布局的適應性。

然后，我們設置主要內容區域的flex值為1，這樣它會自動填充容器中的剩余空間，同時設置overflow-y為auto來自動顯示垂直滾動條。

接下來，我們將側邊欄的高度設置為固定的300px。這是因為我們要保持側邊欄的高度不變，而不受內容的多少影響。

通過這些CSS樣式，我們可以實現一個上下兩欄布局，其中一欄高度固定，另一欄自適應容器高度，并自動顯示垂直滾動條。