如何让Flask-Admin仪表盘始终显示水平滚动条（不受内容大小影响）

要让水平滚动条始终可见，无需滚动到页面底部，核心是通过自定义CSS修改表格容器的滚动行为，覆盖Flask-Admin的默认样式。以下是具体实现步骤：

1. 编写自定义CSS #

创建static/css/custom_admin.css文件，添加以下样式：

/* 针对Flask-Admin的表格响应式容器 */
.table-responsive {
    /* 强制显示水平滚动条，即使内容未超出容器宽度 */
    overflow-x: scroll;
    /* 可选：限制容器高度，让表格区域独立滚动（避免页面过长） */
    max-height: 80vh;
    overflow-y: auto;
    /* 优化滚动条样式（可选） */
    scrollbar-width: thin;
}

/* 适配Chrome、Safari等WebKit浏览器的滚动条样式 */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: #cccccc;
    border-radius: 4px;
}

2. 在Flask-Admin中注入自定义CSS #

方法一：针对单个ModelView生效 #

在你的ModelView子类中，通过extra_css属性引入自定义样式：

from flask_admin.contrib.sqla import ModelView

class YourModelView(ModelView):
    # 其他配置项（如列设置、权限等）
    extra_css = ['/static/css/custom_admin.css']

方法二：全局生效（所有Admin页面） #

继承Flask-Admin的基础模板，添加自定义CSS引用：

1. 在templates/admin/master.html中创建自定义模板：

{% extends 'admin/base.html' %}

{% block head_css %}
    {{ super() }}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/custom_admin.css') }}">
{% endblock %}

2. 初始化Admin时指定该模板：

from flask_admin import Admin

admin = Admin(
    app,
    name="你的后台管理",
    template_mode="bootstrap4",
    base_template="admin/master.html"
)

原理说明 #

Flask-Admin默认给表格容器使用overflow-x: auto，只有当内容超出容器宽度时才显示水平滚动条，且滚动条位于容器底部。当表格数据量极大时，容器被内容撑得很长，导致滚动条被推到页面最底部。通过设置overflow-x: scroll强制显示滚动条，并可选限制容器高度让表格区域独立滚动，就能让水平滚动条始终处于可见区域，无需滚动到页面底部。

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