这段时间看了一下之前的demo,发现了当时记录了一句 justify-content: center; 会影响滚动条内容展示,觉得还是记录一下
情况复现
-
这里我简单的写一下demo复现一下这个问题,如下:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {width: 100vw;height: 100vh;padding-top: 100px;}.box {padding-top: 20px;margin: auto;width: 300px;height: 100px;border: 3px solid skyblue;display: flex;justify-content: center;overflow: auto;}.box-item {flex-shrink: 0;width: 100px;height: 30px;border: 1px solid salmon;}</style> </head><body><div class="container"><div class="box"><div class="box-item">AAA</div><div class="box-item">BBB</div><div class="box-item">CCC</div><div class="box-item">DDD</div><div class="box-item">EEE</div></div></div> </body></html>
-
展示效果,如图:
-
可以看到左侧的 AAA 是无法被展示出来的,具体原因我也不是很清楚
解决方法
-
其实也非常简单,将 justify-content 属性设置为 start
-
此时就可以看到已经可以正常展示了,如果需要居中的话,可以尝试一些其他方法了,比如 margin