请教吧友们一个问题

今天在使用flex布局时遇到一个问题，当蓝色方块较少时能实现布局内容水平和垂直方向居中，但是当方块较多时，第一行和第二行文字不显示，以及部分方块不显示，不知道原因，期望是在粉红色容器中能通过拖动滚动条从上到下完全显示
图1 如下：

图2 如下：

代码如下：
<template>
<div>
<h1>测试flex</h1>
<div class="flex">
<div class="flex-one">我是第一行</div>
<div class="flex-two">我是第二行的数据</div>
<div class="flex-three">
<div class="flex-three-item" v-for=" item in 13" :key="item"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'testFlex',
components: {},
data() { return {} },
created() {},
computed: {},
methods: {},
mounted() { }}
</script>
<style lang="scss" scoped>
.flex {
width: 500px;
height: 300px;
background-color: pink;
margin: 0 auto;
overflow: auto;
display: flex;
justify-content: center;
align-items: center;
align-content:center;
flex-flow: column;
&-three {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
&-item {
width: 100px;
height: 100px;
background-color: aqua;
margin: 5px;
}
}
}
</style>

不感兴趣

开通SVIP免广告