flex布局中滚动条展示内容时部分内容无法显示

这段时间看了一下之前的demo,发现了当时记录了一句 justify-content: center; 会影响滚动条内容展示,觉得还是记录一下

情况复现

  1. 这里我简单的写一下demo复现一下这个问题,如下:

    html 复制代码
    <!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>
  2. 展示效果,如图:

  3. 可以看到左侧的 AAA 是无法被展示出来的,具体原因我也不是很清楚

解决方法

  1. 其实也非常简单,将 justify-content 属性设置为 start

  2. 此时就可以看到已经可以正常展示了,如果需要居中的话,可以尝试一些其他方法了,比如 margin

相关推荐
blackorbird30 分钟前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者1 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强1 小时前
Chrome和IE获取本机ip地址
前端
天***88961 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*2 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v2 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls2 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友2 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵2 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
Panda__Panda3 小时前
docker项目打包演示项目(数字排序服务)
运维·javascript·python·docker·容器·c#