Dash datatable getting out of container

I have a dash datatable inside a dbc.Col (which is inside a dbc.Row), and I can not figure out hoy to keep the table inside its container when the screen size is smaller (trying to make it responsive). If the table is too big for its container, it should have a scroll bar, I added the "overflowX:auto" to its style and still won't work. Right now it looks like this:

The code is something like:

dbc.Col(dt.DataTable(
                id='tabla_req',
                style_table={
                'overflowX': 'auto',
                'width':'100%',
                'margin':'auto'},
                row_deletable=False,
                row_selectable="single",
                page_current= 0,
                page_size= 10,
                fill_width=False,
                style_data={
                    'whiteSpace': 'normal',
                    'height': 'auto',
                },
                #editable=False,
                data=df.to_dict('records'),
                columns=[{"name": i, "id": i} for i in df.columns.tolist()]),
width=12
)

from Dash datatable getting out of container