Graph doesn't scale according to the div size

plotly.js
1

I created two graph side by side with the first one take 5 columns while the second graph take 7 columns. my expectation is both graph fully occupy their respective assigned div. it is not when i first load the app. but after i resize the screen a bit the second graph scale nicely to what i expect.

html.Div([
  html.Div([dcc.Graph(id=f'binning-{corner}', figure=get_pv_binning(partition, corner), config={'displayModeBar': False})], className='five columns'),
  html.Div([dcc.Graph(id=f'trend-{corner}', figure=get_pv_trend(partition, corner), config={'displayModeBar': False})], className='seven columns')
], className='row detail'),

initial:

image
image.png1667×451 58.7 KB

after screen resize or drag the second graph

image
image.png1668×454 61.3 KB

2

the problem occur when i am using hover/click to show block feature. when i turn off the css the size of both graph are matching with the designated div width. do you have any theory behind this scenario?