Dash界面CSS溢出导致KPI选项丢失的问题求助

问题描述 #

使用Python Dash框架开发界面，为KPI选择区域添加垂直滚动条后，滚动条处于顶部位置，但KPI选项从第7个元素开始显示，顶部内容丢失；未添加滚动条时所有KPI可正常显示。当前nb_kpi_tests变量值为25。

相关代码 #

Python代码 #

dbc.Row(
    id="kpi-selector",
    children=[
        html.H3(id="kpi-selection-title",children="Select all KPIs you want to calculate"),
        html.Br(),
        html.Div(
            id="kpi-selection-div",
            children=[
                add_kpi(nb_kpi_tests)]),
        html.Br(),
        html.Br(),
        html.Div(
            id="selection-buttons",
            children=[
                dbc.Button(
                    id="reset-kpi",
                    children="Reset selection",
                    n_clicks=0,
                ),
            ],
        ),
    ],
),

def add_kpi(number):
    final=html.Div(id="checklists-div", children=[])
    cmpt = 1
    part = html.Div(
        id=f"checklist{cmpt}",
        className="checklists",
        children=[],
        )
    
    for i in range (number):
        if (i%2)==0 and i!=0:
            final.children.append(part)
            cmpt += 1
            part = html.Div(
                id=f"checklist{cmpt}",
                className="checklists",
                children=[],
                )
            part.children.append(add_checkbox(i))
        else:
            part.children.append(add_checkbox(i))
            
    final.children.append(part)
    
    return final
    
def add_checkbox(number):
    return html.Div(
        className="each-kpi-div", 
        children=[
            daq.BooleanSwitch(id={'type': 'kpi-switch', 'index': number},className="kpi-checkbox"),
            html.H3(f"KPI_{number}"), 
            html.Button(id={'type': 'kpi-definition', 'index': number},className="help-kpi",children="?"),
        ],
    )

CSS代码 #

#kpi-selector {
  width: 40%;
  max-height: 40rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 10px;
  box-shadow: 0 0 8px 8px #2d3038;
}

#kpi-selection-title {
    width: 100%;
    font-size: 22px;
    font-weight: 600;
    padding-bottom: 1rem;   
    text-align: center;
    top: 0;
    border-bottom: 1px solid #a0abb0;
}

#kpi-selection-div {
  width: 100%;
  height: 30rem; /* Modifier la hauteur en conséquence */
  display: flex;
  overflow-y: auto;
  justify-content: center;
  align-items: safe-center;
  flex-direction: column;
}

#checklists-div {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

.checklists {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row; 
}

.each-kpi-div {
    width: 40%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    margin: 0 2% 0 2%;
}

问题原因 #

问题出在#kpi-selection-div的Flex布局属性：

• justify-content: center 和 align-items: safe-center 会强制容器内的内容垂直居中排列
• 当内容总高度超过容器固定高度30rem时，顶部的内容会被挤出可视区域，虽然滚动条处于顶部，但实际显示的是居中后的内容，导致前6个KPI被隐藏

解决方案 #

修改#kpi-selection-div的CSS属性，让内容从顶部开始排列：

#kpi-selection-div {
  width: 100%;
  height: 30rem; /* Modifier la hauteur en conséquence */
  display: flex;
  overflow-y: auto;
  justify-content: flex-start;
  align-items: stretch;
  flex-direction: column;
}

或者简化为默认属性（Flex布局下flex-direction: column时，justify-content默认值为flex-start，align-items默认值为stretch）：

#kpi-selection-div {
  width: 100%;
  height: 30rem;
  display: flex;
  overflow-y: auto;
  flex-direction: column;
}

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