web前端flex的问题?

我希望构建一个页面（main），分为标题（header）和内容（content）两大部分。

标题固定不变的，内容是滚动的（scroll-view）。

首先通过main通过height: 100vh定义了页面高度，然后content通过flex:1定义了自动填充高度。

但content会被内容撑高，scroll-view不能滚动，导致变成了整个页面的滚动。

也尝试过在scroll-view外面套一个view来flex:1，但仍然无效。

求各位指教，谢谢。

<view class="main">
 
  <view class="header">
    标题
  </view>
 
  <view class="content">
    <scroll-view scroll-y>
      <view>内容1</view>
      <view>内容2</view>
      <view>内容3</view>
      <view>内容4</view>
      <view>内容5</view>
      <view>内容6</view>
      <view>内容7</view>
      <view>内容8</view>
      <view>内容9</view>
      <view>内容10</view>
    </scroll-view>
  </view>
 
</view>

.main {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
 
.header {
  padding: 50px;
  background-color: bisque;
}
 
.content {
  /* flex: 1; */
  background-color: chartreuse;
}
 
.content view {
  border: 1px sienna solid;
  height: 100px;
}