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

相关推荐
会豪2 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子2 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶2 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子2 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_2 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23332 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin2 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js
遂心_3 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
Moonbit3 小时前
MoonBit 正式加入 WebAssembly Component Model 官方文档 !
前端·后端·编程语言
龙在天3 小时前
ts中的函数重载
前端