我正在用python开发一个Dash Web应用程序，我对这个框架很陌生，所以我很难让UI按照我想要的方式运行。
基本上，我有下面的UI与2下拉菜单，让我过滤和重新渲染相应的图形。问题是，当我选择更多的点从下拉列表中，它不可避免地增长，以调整当前选择的选项列表。
参见图片：

现在我需要向下滚动以查看已经选择了很多项的下拉列表。但我真正想要的是这个列表可以水平滚动，这样我设置的容器的整体大小不会改变，因此它不会进一步向下推它下面的容器。请参阅下面的问题：

下面是我当前的app_layout代码：

app.layout = html.Div([
    html.Div([
        html.H1('Summary:', style={'margin': '30px', 'align-items': 'center', 'color': '#555555'}),
        html.Div(
            id='output-summary',
            style={
                'width': '85%',
                'display': 'inline-block',
                'verticalAlign': 'top',
                'overflowY': 'scroll',
                'maxHeight': 'calc(100vh - 300px)',
                'padding': '20px'
            }
        )
    ], style={
        'width': '30%',
        'background': 'linear-gradient(270deg, rgba(92, 68, 62, 0.5), rgba(56, 32, 88, 0.5)',
        # Inverted gradient for left side div
        'height': '100%',
        'position': 'fixed',
        'left': 0,
        'top': 0,
        'bottom': 0,
        'box-shadow': '0px 4px 20px rgba(0, 0, 0, 0.1)',
        'overflowY': 'scroll',
        'z-index': '1',
    }),
    html.Div([
        html.Div([
            html.H1(colored_title, style={'color': '#FFFFFF', 'margin-left': '30px', 'margin-right': '15px'}),
            html.Div([
                dcc.Dropdown(
                    id='file-dropdown',
                    options=[
                        {'label': os.path.basename(path), 'value': os.path.basename(path)}
                        for path in file_paths
                    ],
                    multi=True,
                    value=[],
                    placeholder='Choose files...',
                    style={
                        'width': '100%',
                        'background-color': 'rgba(16, 16, 16, 0.3)',
                        'overflowY': 'scroll',
                        'border': 'none',
                        'margin': '16px',
                        'padding-right': '30px',
                        'font-size': '12px',
                        'line-height': '24px',
                        'z-index': '3',
                    }
                ),
                dcc.Dropdown(
                    id='package-dropdown',
                    options=[
                        {'label': package, 'value': package}
                        for package in package_files
                    ],
                    value=None,
                    placeholder='Choose a package...',
                    style={
                        'width': '100%',
                        'background-color': 'rgba(16, 16, 16, 0.3)',
                        'margin': '16px',
                        'padding-right': '30px',
                        'border': 'none',
                        'font-size': '12px',
                        'line-height': '24px',
                        'z-index': '3',
                    }
                ),
            ], style={'display': 'flex', 'height': '150px', 'justify-content': 'space-between', 'width': '100%'})
        ], style={'display': 'flex', 'align-items': 'center', 'justify-content': 'space-between', 'width': '95%'}),
        dcc.RadioItems(
            id='open-file-radio',
            options=[
                {'label': 'Open File On Click', 'value': 'open_file'}
            ],
            style={'margin': '20px', 'color': '#FFFFFF'},  # Added color
            value=None,
            labelStyle={'display': 'block'}
        ),
        html.Div(id='scatter-plot-container',
                 children=[dcc.Graph(id='scatter-plot',
                                     figure=fig,
                                     clickData=None,
                                     style={'height': '650px', 'margin': '20px'})
                           ],
                 style={'width': '95%', 'margin': '10px', 'margin-left': '20px', 'display': 'inline-block',
                        'border-radius': '16px', 'background-color': 'rgba(255, 255, 255, 0.1)',
                        'box-shadow': '0px 4px 20px rgba(0, 0, 0, 0.1)', })
    ], style={
        'width': '70%',
        'margin-end': '20px',
        'height': '100%',
        'position': 'fixed',
        'right': 0,
        'top': 0,
        'bottom': 0,
        'background': 'linear-gradient(90deg, rgba(92, 68, 62, 0.5), rgba(56, 32, 88, 0.5)',
        'overflowY': 'scroll',
        'align-items': 'center',
        'box-shadow': '-8px 0px 20px rgba(0, 0, 0, 0.1)',
        'z-index': '4'
    })
])

在这方面的任何帮助是非常感谢。或者，如果这是出于某种原因不可能的，我是开放的替代品！
谢谢！
编辑：
我尝试添加CSS样式：

display: flex;
  overflow-x: scroll;
}

#file-dropdown .Select-value {
  flex: 0 0 50px;
}

但我仍然看到的问题，如下面的图片所示：