Not able to set a fixed scrollable size to dcc.Dropdown – Html

I’m developing a Dash web application in python and I’m pretty new to the framework so I’m struggling to get the UI to behave as I want.

Basically I have the following UI with 2 dropdowns that allow me to filter and re-render the graph accordingly. The issue is that as I select more points from the dropdown, it inevitably grows to adjust for the list of currently selected options.

See pictures:

Right now I need to scroll down to see the dropdown list when a lot of items are already selected. But what I really just want is for this list to be horizontally scrollable so that the overall size of the containers I’ve set doesn’t change, hence it doesn’t push the containers below it further down. See issue below:

Here is my current code for the 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'
    })
])

Any help on this is greatly appreciated. Or if this is for some reason not possible I’m open to alternatives!

Thanks!

EDIT:

I’ve tried adding the css styling:

  display: flex;
  overflow-x: scroll;
}

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

but I’m still seeing the issue as shown in the pic below: