Flexbox水平滚动异常：17个子元素仅显示12个求助

你当前的Flexbox水平滚动容器无法显示全部17个子元素，核心问题在于容器的justify-content: center属性。当子元素总宽度超出容器宽度时，这个居中属性会让首尾的子元素被容器边界截断，同时限制了滚动的有效范围，导致无法滚动到剩余元素。

原始代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
 .flex{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    max-height: 320px;
    gap: 4px;
    align-items: center;
    justify-content: center;
    border: 2px solid rgb(11, 11, 11);
    }
   .class {
    min-width: 200px;
    height: 300px;
    border:2px solid black;
    border-radius:4px;
    }
    </style>

    </head>

    <body>

    <div class="flex">
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
       
    </div>
    </body>
    </html>

解决方案 #

移除.flex容器中的justify-content: center属性即可解决问题。当该属性被移除后，子元素会默认左对齐，容器的滚动范围会覆盖所有子元素的宽度，允许你滚动查看全部17个元素。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
 .flex{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    max-height: 320px;
    gap: 4px;
    align-items: center;
    border: 2px solid rgb(11, 11, 11);
    }
   .class {
    min-width: 200px;
    height: 300px;
    border:2px solid black;
    border-radius:4px;
    }
    </style>

    </head>

    <body>

    <div class="flex">
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
        <div class="class"></div>
       
    </div>
    </body>
    </html>

如果需要初始状态下子元素居中显示，同时不影响滚动，可以给.flex容器添加左右内边距，或者在容器外层嵌套一个居中的容器，但这种方式会增加结构复杂度。最直接且不影响滚动功能的方案就是移除justify-content: center。

内容的提问来源于stack exchange，提问作者dark