tumblr individual post 嵌入溢出 div

Question

我正在尝试将 tumblr 提供的 post 嵌入添加到 individual lightboxes/popups。这非常有用，但问题是有时嵌入会溢出 div.lighters 但会保留在 div#cboxLoadedContent

中

我不知道在这种情况下什么是相关代码，但我会尽力而为。

HTML

<div style="display:none;">
...
    <div id="bird" class="lighters">
        <div class="tumblr-post" data-href="https://embed.tumblr.com/embed/post/rmk5cWt002YFR1zbW4hp6w/115015084199" data-did="74b578aacc18a67bdeab9220d4b3ca90d1897f21"><a href="http://bychloethemes.tumblr.com/post/115015084199/bird-theme-made-by-chloe-themes-preview-1">http://bychloethemes.tumblr.com/post/115015084199/bird-theme-made-by-chloe-themes-preview-1</a></div><script async src="https://secure.assets.tumblr.com/post.js"></script>
    </div>
</div>

然而 post-processed html（因为我使用的是灯箱）是

<div id="cboxLoadedContent">
    <div id="bird" class="lighters">
        <div class="tumblr-post" data-href="https://embed.tumblr.com/embed/post/rmk5cWt002YFR1zbW4hp6w/115015084199" data-did="74b578aacc18a67bdeab9220d4b3ca90d1897f21"><a href="http://bychloethemes.tumblr.com/post/115015084199/bird-theme-made-by-chloe-themes-preview-1">http://bychloethemes.tumblr.com/post/115015084199/bird-theme-made-by-chloe-themes-preview-1</a></div><script async src="https://secure.assets.tumblr.com/post.js"></script>
    </div>
</div>

和CSS

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
/*----Change below here-------*/
#cboxOverlay{background:#daf6f0;}
#colorbox{outline:0;}
#cboxContent{;background:#000;}
.cboxIframe{background:#fff;}
#cboxLoadedContent{border:5px solid #000; background:#fff;}
#cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
#cboxClose{position:absolute; top:15px; right:5px; display:block; width:38px; height:19px;z-index:99999;color:#000;font-size:20px;}
#cboxClose:hover{color:#f00;}
.cboxPhoto {width:500px;}
.lighters {padding:20px; background:#fff;max-height:500px;overflow-y:auto;}

博客是 http://bychloethemes.tumblr.com，您需要单击代码选项卡并一直滚动到底部，然后单击 'bird' 主题上的 'more'

提前致谢

Answer 1

感谢 Matt Stephens，我将最大高度从 .lighters 移动到 #cboxLoadedContent 的样式，现在可以正常工作了。

tumblr individual post 嵌入溢出 div

tumblr individual post embed overflowing div

css

embed

lightbox

tumblr