css垂直居中超出后并出现滚动条的解决⽅案
⽰例效果
内容少时需要显⽰为（第⼀张），内容多是需要显⽰ （第⼆张）
这⾥实现主要使⽤flex 布局+两个盒⼦ 配合，⾥⾯的ul 盒⼦必须设置⼀个最⼤的⾼度，才能使⽤内容不超出最外层盒⼦（如图 内容超出前⾯的内容被上图覆盖导致显⽰不全），
主要代码
css部分
.poetry-full-box {
height:140px;
overflow-x: auto;
padding:010px;
position: relative;
text-align: center;
}
css设置表格滚动条
.flex-c-c {
display: flex;
align-items: center;
justify-content: center;
}
.
poetry-msg {
max-height:140px;
font-size:13px;
}
html 采⽤了vue
<div class="poetry-full-box flex-c-c">
<ul class="poetry-msg"v-if="igin != null">
<li v-for="item t":key="item">{{ item }}</li> </ul>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。