背景：qiankun嵌入子应用时菜单的内的滚动条不显示，遇到2次，记录一下 抽离dom发现flex父元素height:0 解决不了,换个思路，定位解决。
父：position: relative; // 添加相对定位
子：position: absolute; // 添加绝对定位 width: 100%; height: 100%; overflow: auto;
还有其他方法的大神指教。
<template>
<div class="layout-content-wrapper">
<div class="breadcrumb-wrapper">breadcrumb-wrapper</div>
<div class="main-wrapper">
<div class="main-content-wrapper">
<div class="data-set-wrapper">
<div class="title">title</div>
<div class="search">search</div>
<div class="list">
<div class="box">
<p v-for="i in 100" :key="i">{{ i }}</p>
</div>
</div>
</div>
<div class="data-set-field-wrapper">data-set-field-wrapper</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.layout-content-wrapper {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.breadcrumb-wrapper {
height: 46px;
}
.main-wrapper {
flex: 1;
display: flex;
flex-direction: column;
.main-content-wrapper {
flex: 1;
display: flex;
.data-set-wrapper {
display: flex;
flex-direction: column;
height: 100%;
width: 150px;
background-color: #f0f0f0;
.title {
height: 50px;
background-color: #d2d2d2;
}
.search {
height: 50px;
background-color: #9a9a9a;
}
.list {
flex: 1;
display: flex;
height: 0;
overflow: auto;
background-color: #ffffff;
position: relative; // 添加相对定位
.box {
position: absolute; // 添加绝对定位
width: 100%;
flex: 1;
overflow: auto;
height: 100%;
background-color: #f0f0f0;
p {
width: 150px;
}
}
}
}
.data-set-field-wrapper {
flex: 1;
background-color: #dfcbcb;
}
}
}
}
</style>
