twitframe регулируемая высота в Dash / Plotly

Question

Я отображаю твиты, используя twitframe в элементе iFrame внутри div в моем приложении da sh Plotly: https://bbb-twitter-monitor.herokuapp.com/

Я перебираю 30 самых важных твиты, и я пытаюсь отобразить основные твиты с фиксированной шириной и переменной высотой, но я получаю что-то вроде этого:

Я пытался добавить сценарий javascript (jQuery), чтобы решить его, но он не работает, и я новичок в веб-разработке, поэтому я теряюсь в том, как поступить.

Код javascript:

$(document).ready(function() {
    /* find all iframes with ids starting with "tweet_" */
    console.log("blablabala");
    $("iframe[id^='tweet_']").load(function() {
        this.contentWindow.postMessage({ element: this.id, query: "height" },
            "https://twitframe.com");
    });
});

/* listen for the return message once the tweet has been loaded */
$(window).bind("message", function(e) {
    var oe = e.originalEvent;
    
    if (oe.origin != "https://twitframe.com")
        return;
	
    if (oe.data.height && oe.data.element.match(/^tweet_/))
        $("#" + oe.data.element).css("height", parseInt(oe.data.height) + "px");
});

Я применяю скрипт Js к идентификатору "tweet_", который является именем моего элемента iFrame, как вы можете видеть ниже:

def resume_tweets(df, type='share'):
    list_twt = []
    for i in list(range(30)):
        user = df['id_user'].to_list()[i]
        tweet = int(df['tweet_id'].to_list()[i])
        link = df['retweeted_url'].to_list()[i]

        if link == None:
            link = df['quote_url'].to_list()[i]
        else: 
            pass

        if link == None:
            link = "https://twitter.com/{user}/status/{tweet}"
        else:
            pass

        if type == 'share':
            text = f"#{i+1} Most Shared - Total Shares: {df['count'].to_list()[i]}"
        else: 
            text = f"#{i+1} Most Retweeted - Total Shares: {df['count'].to_list()[i]}"

        list_twt.append(html.Div([html.P([text # | Link: {link}"], style={'textAlign':'center', 'fontWeight':'bold', 'fontSize':'18px'}),
                                    html.Iframe(src=f"https://twitframe.com/show?url={link}", 
                                                id='tweet_', 
                                                style={'width':'550px',
                                                      #'position':'relative',
                                                       'minHeight':'275px',
                                                       'maxHeight':'700px', 
                                                       'border':'0', 'conversation':'None',
                                                       'frameborder':'0',
                                                       'theme':'dark'
                                    })
                                    ], style={'margin':'24px 0'}
                                ))
    return list_twt

И этот список из 30 div находится внутри другого div с фиксированной высотой 600px с scrollY;

html.Div([
        html.Div(id='output-iframe-share', className='six columns', style={'height':'600px',  'overflowY':'auto', 'paddingRight':'36px'}),
        html.Div(id='output-iframe-rt', className='six columns', style={'height':'600px',  'overflowY':'auto', 'paddingLeft':'36px'})
], className='row-m', style={'textAlign':'center', 'marginBottom':'72px'})

Я много читал и пробовал много разных подходов, но никто не работал со мной, может ли кто-нибудь, имеющий опыт работы в веб-разработке, помочь мне с этим, PLEEEAAAAAAAAASE ?!

Я работаю над этим два долгих дня и пока без решения = /