当flex的justify-content遇上overflow

当一个容器中设置了flex的justify-content:center ，并且设置overflow时，看下面这个代码：

<style>.test{height:100px;border:1px solid #559;overflow:auto;/** 下面是垂直水平居中 */display: flex;flex-direction: column;align-items:center;justify-content:center;}
</style><div class="test"><p>123</p><p>456</p><p>789</p>
</div>

显示如下：

居中显示没问题，scroll也出现了，但是滚动条在最上面的时候，123被挡住了！！
导致这个的原因就是justify-content:center，取值为：space-around / space-evenly时也会有这个问题。

解决办法

把两个属性分开，在列表p外面在套一层

<style>.test{height:100px;overflow:auto;border:1px solid #559;}.box{display: flex;flex-direction: column;align-items:center;justify-content:center;}
</style><div class="test"><div class="box"><p>123</p><p>456</p><p>789</p></div>
</div>

当flex的justify-content遇上overflow相关推荐

当flex布局遇上white-space
这几天遇到一个及其神奇的事情:flex布局遇上white-space:nowrap,这个布局就崩了!!! 在项目的某个页面中要做一个Menu(这个Menu不是项目的主Menu,而是某个页面中的内容), ...
flex 遇上white-space:nowrap的2种解决方法
flex 遇上white-space:nowrap的2种解决方法参考文章: (1)flex 遇上white-space:nowrap的2种解决方法 (2)https://www.cnblogs.co ...
[当人工智能遇上安全] 6.基于机器学习的入侵检测和攻击识别——以KDD CUP99数据集为例
您或许知道,作者后续分享网络安全的文章会越来越少.但如果您想学习人工智能和安全结合的应用,您就有福利了,作者将重新打造一个<当人工智能遇上安全>系列博客,详细介绍人工智能与安全相关的论文. ...
当微信小程序遇上filter~
在微信小程序的开发过程中,当你想要实现不同页面间的数据绑定,却为此抓耳饶腮时,不妨让微信小程序与filter 来一场完美的邂逅,相信会给你带来别样的惊喜~ 前段时间被安利了一个很实用的公众号-前端早读 ...
当uniapp遇上滚动穿透，巧妙的解决方式~
上一次遇上这个滚动穿透,我是暴力解决的,当uniapp遇上可恶的滚动穿透的时候,我是怎么暴力解决的,今天学会了一个巧妙的方式,几行代码,超级方便好用,爱了爱了- 就是利用page-meta标签的pag ...
微信小程序 php毛玻璃,当微信小程序遇上filter~
在微信小程序的开发过程中,当你想要实现不同页面间的数据绑定,却为此抓耳饶腮时,不妨让微信小程序与filter 来一场完美的邂逅,相信会给你带来别样的惊喜~ 前段时间被安利了一个很实用的公众号-前端早读 ...
微信小程序过滤html,当微信小程序遇上filter~(示例代码)
在微信小程序的开发过程中,当你想要实现不同页面间的数据绑定,却为此抓耳饶腮时,不妨让微信小程序与filter 来一场完美的邂逅,相信会给你带来别样的惊喜~ 前段时间被安利了一个很实用的公众号-前端早读 ...
当可解释人工智能遇上知识图谱
来源:知乎-机器学习小谈地址:https://zhuanlan.zhihu.com/p/386458680本文约6100字,建议阅读10分钟可解释人工智能遇上知识图谱. 在科学研究中,从方法论上来讲 ...
推荐系统遇上深度学习，9篇阿里推荐论文汇总！
作者 | 石晓文转载自小小挖掘机(ID: wAIsjwj) 业界常用的推荐系统主要分为两个阶段,召回阶段和精排阶段,当然有时候在最后还会接一些打散或者探索的规则,这点咱们就不考虑了. 前面九篇文章中 ...

当flex的justify-content遇上overflow

解决办法

当flex的justify-content遇上overflow相关推荐

最新文章

热门文章