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

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

情况复现

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

    DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Documenttitle>
      <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">AAAdiv>
          <div class="box-item">BBBdiv>
          <div class="box-item">CCCdiv>
          <div class="box-item">DDDdiv>
          <div class="box-item">EEEdiv>
        div>
      div>
    body>
    
    html>
    
  2. 展示效果,如图:

    flex布局中滚动条展示内容时部分内容无法显示_第1张图片

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

解决方法

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

    flex布局中滚动条展示内容时部分内容无法显示_第2张图片

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

你可能感兴趣的:(问题记录,javascript,css,前端)