Bokeh - Выпуск адаптивного дизайна с Flask и Bootstrap4

Question

Я занимаюсь разработкой панели инструментов с Flask, Bootstrap4 и Bokeh.Тем не менее, я не могу получить стабильный адаптивный дизайн с боке.У меня есть восемь вкладок с каждыми двумя графиками боке.Вкладки скрыты с помощью javaScript, поэтому можно выбрать вкладку, и она будет показана.Отзывчивость работает только для видимой вкладки по умолчанию.Соответственно, для первой вкладки графики подстраиваются под заданный размер.Тем не менее, для других вкладок (того же CSS, того же HTML) графики не ограничиваются данной границей CSS и занимают больше места, чем Div, в котором они живут.И, как только я возвращаюсь к видимой вкладке по умолчанию, эти графики также теряют свою отзывчивость и ведут себя как все остальные.

Я использую режим определения размера: «растянуть оба» и ограничить высоту графиков с помощью CSS.

Я был бы благодарен, если бы кто-то мог указать мне на решение.Приветствия Ларс

Вот мой код построения:

def plottingto(dataframe, lineID, plotnametext ):

    names = lineID

    source = ColumnDataSource(data={
    'date'      : dataframe['date'],
    'time'      : dataframe['time'],
    'index'     : dataframe.index,
    'pendeltime_To_Real': dataframe['pendeltime_To_Real'],
    'pendeltime_To': dataframe['pendeltime_To'],
    'pendeltime_Back_Real': dataframe['pendeltime_Back_Real'],
    'pendeltime_back': dataframe['pendeltime_back'],
    'delay_to': dataframe['delay_to'],
    'delay_back': dataframe['delay_back'],
    })

    hover_tool = HoverTool(tooltips=[('Uhrzeit', '@time'),('Pendelzeit', '@pendeltime_To_Real'),('Verzögerung','@delay_to')], names=names)
    tools = [hover_tool, ResetTool(), BoxZoomTool()] #WheelZoomTool(), PanTool(),

    #Bokeh Plott Rückweg Live Today
    p = figure(plot_height=320, x_axis_type="datetime", y_range=(26, 60),tools=tools, sizing_mode="scale_width")
    p.line(x='index', y='pendeltime_To_Real',line_width=1, line_color="#7db800", legend="Echte Pendelzeit", name=names[0], source=source)
    p.line(x='index', y='pendeltime_To', line_width=1, line_color="red", legend="Durchschnittliche Pendelzeit", source=source)
    p.toolbar.logo = None
    plotname = file_html(p, CDN, plotnametext)
    return plotname

Вот мой CSS (в дополнение к bootstrap4):

.fixed_height{
      height:380px;
      padding-bottom: 30px;
      margin-bottom: 50px;
}

Вот мой HTML:

    <div class="row mainrow">
        <button class="accordion">
            <h3 class="headingfullrow">STATISTIKEN ZUM PENDELFENSTER</h3>
        </button>
        <div class="panel">
            <div class="container">
                <div class="row">
                    <div class="col-sm diagrambox">
                        <div class="x_title">
                            <h2>Verkehrslage letzte 7 Werktage Hinweg</h2>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_panel tile fixed_height overflow_hidden">
                            {{BOKEHWEEKTO | safe}}
                        </div>
                    </div>
                    <div class="col-sm diagrambox">
                        <div class="x_title">
                            <h2>Verkehrslage letzte 7 Werktage Rückweg</h2>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_panel tile fixed_height overflow_hidden">
                            {{BOKEHWEEKBACK | safe}}
                        </div>
                    </div>
                </div>
            </div>