用于嵌入的新Instagram设计打破了整个网站（flexbox，css）

Question

我正面临Instagram嵌入的新问题，在之前版本的嵌入中，它创建了一个iframe，一切都还可以。但是新的嵌入物重现了＃34;代码块和插入样式表到父网站，这意味着，所有使用的CSS样式，打破了整个网站设计。

主要问题在于此文件：
https://www.instagram.com/static/bundles/base/EmbedSDK.css/e46f41123c91.css

当你看到定义时：

#react-root, article, div, footer, header, main, nav, section {
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
border: 0 solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 0;
padding: 0;
position: relative; }

然后您可能会看到主要问题在哪里...当此代码插入任何页面时，100％必须打破整个网站，因为布局基于新的Flexbox技术。主要问题是为什么Instagram删除iframe，哪里可以使用任何东西并将其放置到网站，其中称为

<script async defer src="//www.instagram.com/embed.js"></script>