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

相关推荐
知了一笑6 分钟前
项目效率翻倍,做对了什么?
前端·人工智能·后端
江城开朗的豌豆12 分钟前
webpack了解吗,讲一讲原理,怎么压缩代码
前端·javascript·微信小程序
_xaboy13 分钟前
开源设计器 FcDesigner 限制组件是否可以拖入的教程
前端·vue.js·低代码·开源·表单设计器
江城开朗的豌豆15 分钟前
Webpack配置魔法书:从入门到高手的通关秘籍
前端·javascript·微信小程序
AnalogElectronic20 分钟前
vue3 实现记事本手机版01
开发语言·javascript·ecmascript
江城开朗的豌豆20 分钟前
玩转小程序生命周期:从入门到上瘾
前端·javascript·微信小程序
Fanfffff72024 分钟前
从TSX到JS:深入解析npm run build背后的完整构建流程
开发语言·javascript·npm
im_AMBER26 分钟前
React 10
前端·javascript·笔记·学习·react.js·前端框架
Moment31 分钟前
记录一次修改 PNPM 版本,部署 NextJs 服务时导致服务器崩溃的问题 😡😡😡
前端·javascript·后端
浪裡遊33 分钟前
css面试题1
开发语言·前端·javascript·css·vue.js·node.js