极客观点
项目管理
HarmonyOS
问题
现有一个div，作为外层的container，它高度是固定的，它内部的内容高度是大于它自身的，所以需要要让内部内容可以滑动，但是通过flex控制其内部内容，然后设置over-flow:auto后，再通过justify-content:center设置内容居中，就会出现它内部的内容显示不全的情况。
默认内容居中，向下可以滑到底部，向上不能滑到顶部.
很不解这是为什么。
代码如下：
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head >
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 添加 favicon icon -->
<meta name="renderer" content="webkit">
<title>基础</title>
<style>
div#container {
display: flex;
background: wheat;
border: gray 1px solid;
height: 50vh;
overflow: auto;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</head>
<body ontouchstart>
<main>
<div id="container">
<div class="item">11</div>
<div class="item">22</div>
<div class="item">33</div>
<div class="item">44</div>
<div class="item">55</div>
<div class="item">66</div>
<div class="item">66</div>
<div class="item">66</div>
<div class="item">66</div>
<div class="item">66</div>
<div class="item">66</div>
<div class="item">66</div>
<div class="item">66</div>
<div class="item">66</div>
<div class="item">66</div>
<div class="item">66</div>
<div class="item">66</div>
<div class="item">66</div>
<div class="item">66</div>
<div class="item">66</div>
<div class="item">66</div>
<div class="item">66</div>
<div class="item">66</div>
<div class="item">66</div>
<div class="item">66</div>
</div>
</main>
</body>
</html>效果：
附上问题网址：
http://olcuw5kr7.bkt.clouddn....
补充：
试了下设置了justify-content: end;和justify-content: flex-end;,结果不一样，flex-end和end有什么区别？
html5
这个应该是 overflow的机制问题吧， overflow: auto;只有下部溢出才会加滚动条，上部溢出只会裁剪，如图
上溢出没有滚动条出现
下溢出，出现滚动条