overflow滚动遇到flex失效问题解决

最近做项目的时候碰到了一个情况。需要固定头部，内容部分占据剩余空间的上下布局结构。但是出现了overflow属性遇到了flex布局失效的情况。

<style>
  .content {
   
    width: 300px;
    height: 400px;
    overflow: scroll;
    display: flex;
    flex-direction: column;
  }