css - 关于flex的justify-content与over-flow:auto的问题。很不解
本文介绍了css - 关于flex的justify-content与over-flow:auto的问题。很不解的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
问题
现有一个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有什么区别？
解决方案
这个应该是 overflow的机制问题吧， overflow: auto;只有下部溢出才会加滚动条，上部溢出只会裁剪，如图
上溢出没有滚动条出现
.item:nth-child(1){
position: relative;
top: -100px;
}
下溢出，出现滚动条
.item:nth-child(5){
position: relative;
top: 100px;
}这篇关于css - 关于flex的justify-content与over-flow:auto的问题。很不解的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
