How to make a scrollable iframe?

Hello,

I am trying to add a horizontal scroll bar to my iframe content https://ohyoon-kwon.squarespace.com/config#/|/canvas/

HTML

CSSiframe { overflow: scroll; border: 1px solid #fff !important; width: 100%; height: 850px;}

Do you know why this way does not work?

Thank you so much!Ohyoon

I visited the page you sight and saw that the iframe is not displaying. Perhaps I can help.

Using responsive code I developed for myself, I devised this Pen on CodePen using your source url. You will find all the necessary HTML and CSS in the pen.

To put the iframe on your site do the following. Put an embed block on the page where you want the iframe. In the code area enter all the HTML code you find in the pen. You can reach the code area by clicking on the </> icon at the far right of the Embed dialog text box.

In Custom CSS enter all the CSS you find in the pen. If you want the iframe sized differently (say 600x480) from that specified in the pen do the following. In the HTML, in the class attribute of the inner div, change responsive-wrapper-wxh-900x850 to responsive-wrapper-wxh-600x480. In Custom CSS, set max-width and max-height to 600px and 480px respectively, and at the appropriate place, enter:

     responsive-wrapper-wxh-600x480 {
        padding-bottom: 80%;        /* w/h = 480/600 = 80% - set aspect ratio */
    }

This will give you your responsive iframe.

Note the following about the iframe attributes you use above.

the frameborder attribute is not supported in HTML5;
the marginheight attribute is not supported in HTML5;
the marginwidth attribute is not supported in HTML5;
the width and height attributes should not be specified in the iframe tag; doing so will destroy the responsiveness; and
the scrolling attribute is not supported in HTML5.

See the w3schools article HTML <iframe> Tag.

These characteristics, along with border, padding, and margin, are set in CSS. With the responsive code you should not need horizontal scrolling. If you find that you do, use the CSS overflow-x property, thus overflow-x: scroll;. See the MDN article overflow-x.

For explanatory remarks about the code and citations to the source articles from which I derived it, see the comments in the code and the comments in the pen (click on the "comments" link in the links bar at the lower left of the pen).

Let me know if you require further help. Let me know how it turns out for you.