verhindern, dass iframe vertikal vollständig auf Mobile expandiert

Question

Ich verwende einen iframe, der eine Liste anzeigt, die Liste ist vertikal ziemlich hoch. Ich habe die Höhe des Iframes auf 600px gesetzt, also auf dem Desktop zeigt es diese Höhe an und man kann durch den Inhalt nach unten scrollen.

Das Problem ist, wenn meine Website auf Mobile angezeigt wird, wird der Iframe auf seine volle Höhe erweitert (nicht mehr 600px mit Scrollen).

Mein iframe:

<iframe src='url' width='360' height='600'></iframe> 

mein css:

iframe { 
    border: 1px solid black 
    padding: 3px; 
    height: 600px; 
    overflow: scroll; 
} 

ich mit einem div meine iframe Umgebung versucht haben, wie folgt, von this question verwiesen, die ein leicht verwandtes Problem ist, aber es immer noch expandiert.

<div style="overflow:auto; -webkit-overflow-scrolling:touch"> 
    <iframe src='url' width='360' height='600'></iframe> 
</div> 

Wie kann ich verhindern, dass der Iframe auf Mobilgeräten erweitert wird? Ist das überhaupt möglich?

Answer 1

So müssen die Abmessungen als auch auf die umgebenden div hinzugefügt werden:

<div style="overflow:auto; -webkit-overflow-scrolling:touch; width:360px; height:600px;"> 
    <iframe src='url' width='360' height='600'></iframe> 
</div> 

Und es wird mehr Sinn machen, die Grenze css zum div statt der iframe zu bewegen.