【Css】解决flex布局下overflow：hidden失效的问题

问题描述：在写页面时，想要子组件只在视口下滚动浏览，但是发现overflow：hidden始终不生效，可以发现整个页面都被滚上去了

问题代码如下：

.content {
    display: flex;
    width: 100vw;
  
    flex-direction: column;
    background-color: rgb(246, 247, 249);
    overflow: hidden;
    ...
    }

原因排查：因为使用了flex布局，因此高度是被子元素撑开的，这时候使用overflow：hidden就会失效 解决如下：只需要给content类加一个高度，这时overflow：hidden即可生效

.content {
    display: flex;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    background-color: rgb(246, 247, 249);
    overflow: hidden;
    ...
}

效果如下：可以发现内容只在子组件下滚动，导航栏和搜索框还在页面顶部,不会整个页面都滚上去，也避免了使用fixed引起的坍塌问题,问题解决