css垂直居中超出后并出现滚动条的解决方案

示例效果
内容少时需要显示为（第一张），内容多是需要显示 （第二张）

这里实现主要使用flex 布局+两个盒子 配合，里面的ul 盒子必须设置一个最大的高度，才能使用内容不超出最外层盒子（如图 内容超出前面的内容被上图覆盖导致显示不全），

主要代码

css部分

 .poetry-full-box {
    height: 140px;
    overflow-x: auto;
    padding: 0 10px;
    position: relative;
    text-align: center;
}
.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="poetry.origin != null">
    <li v-for="item in poetry.origin.content" :key="item">{{ item }}</li>
 </ul>
</div>