问题场景

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

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。