How to add x-scrollbar to a part of dbc.Card, dash, Python3?

Question

I want to make 2 rows of entries. Each row has one label on the left side followed by up-to 20 entries. I am using dbc.Container to hold the layout. In the container I have several dbc.Cards. For simplicity here, I only used one card. In this card, I placed the 2 rows of components.

With the code given below, the screenshot above shows the results. Two things are not what I want.

1. The first column in the 2 rows is for labels, which should not be included in the scroll-zone.
2. The 20 entries in each row are squeezed to be very narrow, and the x-scrollbar is hardly scrolling. Each entry should be wide enough to show a number of 6 digits like 123.123.

Could you please show me how to do it? Thanks

import dash
from dash import html
import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            dbc.Card([
                html.H4('Card Header'),
                dbc.Row([
                    dbc.Col([
                        dbc.Label('Row 1'),
                    ]),
                    *[
                        dbc.Col([dbc.Input(placeholder='123.123')]) for _ in range(20)
                    ]
                ]),
                dbc.Row([
                    dbc.Col([
                        dbc.Label('Row 2'),
                    ]),
                    *[
                        dbc.Col([dbc.Input(placeholder='123.123')]) for _ in range(20)
                    ]
                ])
            ], style={'overflow-x': 'scroll'})
        ])
    ])
])


if __name__ == "__main__":
    app.run_server(debug=True)

Answer 1

Your 2nd question is easy, just add style={"width":"120px"} to your Input or whatever value suits your needs.

The 1st question is kind of tricky and I don't think there is a proper Dash solution.

What you can do is take your labels outside the scroll area. See my proposal below. You may need to fiddle with the row height to align labels and data rows. But it should be possible.

import dash
from dash import html
import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            dbc.Container([
                dbc.Label('Row 1'),
                dbc.Label('Row 2'),
            ], style={
                "display": "flex",
                "flexDirection": "column",
                "alignItems": "flex-end",
                "justifyContent": "flex-end"
                }),
            dbc.Card([
                html.H4('Card Header'),
                dbc.Row([
                    *[
                        dbc.Col([dbc.Input(placeholder='123.123', style={"width":"120px"})]) for _ in range(20)
                    ]
                ], style={"flexWrap":"nowrap"}),
                dbc.Row([
                    *[
                        dbc.Col([dbc.Input(placeholder='123.123', style={"width":"120px"})]) for _ in range(20)
                    ]
                ], style={"flexWrap":"nowrap"})
            ], style={'overflowX': 'scroll'})
        ], style={"display": "flex"})
    ])
])


if __name__ == "__main__":
    app.run_server(debug=True)

Looks like this: