tumblr individual post embed overflowing div

I am trying to add the post embeds tumblr provides to individual lightboxes/popups. This is pretty much working however the problem is sometimes the embed will overflow the div.lighters but will stay contained within div#cboxLoadedContent

I have no idea what constitutes as relevant code in this situation but I will try my best.

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>

However the post-processed html (because I am using a lightbox) is

<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>

and the 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;}

The blog is http://bychloethemes.tumblr.com and you will need to click on the codes tab and scroll all the way to the bottom and click 'more' on the 'bird' theme

Thanks in advance

Solution

Thanks to Matt Stephens I moved the max height from .lighters to the styling of #cboxLoadedContent and it is now working fine.