flex布局中子元素溢出不显示滚动条问题

本文主要是介绍flex布局中子元素溢出不显示滚动条问题，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

问题场景

flex大家都很熟悉就不再详细的解释了，有需要的同学可以自行百度。前一段时间写了一个页面布局如下

HTML部分

    <div class="contenter">
        <div class="header">
            <h3>header</h3>
        </div>
        <div class="body">
            <div class="left-menu">
                <p v-for="item in 100" :key="item">{{item}}</p>
            </div>
            <div class="content"></div>
        </div>
    </div>

CSS部分

.contenter{
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    .header{
        width: 100%;
        min-height: 64px;
        text-align: center;
        background: cadetblue;
        border-bottom: 1px solid #ccc;
    }
    .body{
        flex: 1;
        display: flex;
        .left-menu{
            width: 264px;
            height: 100%;
            overflow-y: scroll;
            background: orange;
        }
        .content{
            background: olive;
            width: calc(100% - 264px);
            height: 100%;
        }
    }
}

这样的写法菜单部分没有出现预期的滚动条

解决办法

中间内容区域的高度设置为0

这篇关于flex布局中子元素溢出不显示滚动条问题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！