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

相关推荐
mCell10 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip10 小时前
Node.js 子进程:child_process
前端·javascript
excel13 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel14 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼15 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping15 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙16 小时前
[译] Composition in CSS
前端·css
白水清风16 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix16 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780016 小时前
new、原型和原型链浅析
前端·javascript