在网页设计中，经常会遇到上下两栏布局的情况，其中一栏要求固定高度。这个需求可以通过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样式，我们可以实现一个上下两栏布局，其中一栏高度固定，另一栏自适应容器高度，并自动显示垂直滚动条。