Why my map is so small?

Dash Python
1

I created a map using mapbox. But the map is not filled the whole Div.
My map:

image
image.png1488×496 41.6 KB

I noticed other people’s map fill the whole Div. (See the position of widgets):

image
image.png921×456 123 KB

How can I change my codes to make my map looks like that?
Here are my codes:

    map_data = [
        go.Scattermapbox(
            lat=df['latitude'],
            lon=df['longitude'],
            mode='markers',
            marker=dict(
                cmax=50,
                cmin=0,
                color=df['depth'],
                colorbar=dict(
                    title='Colorbar'
                ),
                colorscale='YlGnBu',
                reversescale=True,
                size=5,
                # opacity=0.9
            ),

            text=df['depth'],
            hoverinfo='text'
        )
    ]

map_layout = go.Layout(
    title='Bathymetrical Data',
    autosize=True,
    hovermode='closest',
    xaxis=dict(hoverformat='.5f'),
    yaxis=dict(hoverformat='.5f'),

    mapbox=dict(
        accesstoken=mapbox_access_token,
        bearing=0,
        center=dict(
            lat=lat,
            lon=lon
        ),
        pitch=0,
        zoom=10,
    ),
)

figure = {
    'data': map_data,
    'layout': map_layout
}

Thanks.