DataTable overflow difficulties

Hello

I am trying to use DataTables pretty unsuccessfully. I have tried using the example in https://dash.plot.ly/datatable/sizing however it is not working.

I have a DataTable which gets data upload to it. The DataTable should Fill the space it has been given and never extend beyond it (or shrink).

When I try to apply the examples it just extends beyond the screen

This image is the entire screen. As you can see it extends well beyond the boundaries. I have hidden the names of the columns but some of them are bunched together and are hidden by the next column name.

It also has 2 scroll wheels (neither of which work)

Has anyone else had these problems.

The code displaying the data table given below:

    DataTable(
        data= pd.DataFrame([[""]]).to_dict("rows"), 
        sorting = False, 
        id="Table_of_Data",
        style_cell={
            'fontFamily': 'Open Sans',
            'textAlign': 'center',
            'height': '40px',
        },
        n_fixed_rows = 1,
        style_table={
            'maxHeight': '400px',
            'border': 'thin lightgrey solid',
            'overflowX': 'scroll',
        },
        merge_duplicate_headers=True,
        style_header={
            "left": "50%",
            "marginRight": "-50%"
        },
        style_header_conditional=[
            {
                "if": {"row_index": 0,},
                "backgroundColor": "#003366",
                "fontWeight": 700,
                "color":"white",
            },
        ],
        editable=True,
    ),

Any Help is hugely appreciated
Many Thanks

It’s actually seems to be the exact same issue as CSS grid causing dcc.Graph to resize incorrectly since disaberling grid got everything working again.