resize modal according to iframe content

Question

I have a modal that I want to resize according to the iframe content size.

I can make the modal big , but the content of iframe is still coming with scroll bars.

Here is the link to github page. click on the modal "One Minute Story" link on the top left.

page

I want the modal to be exactly centered and the iframe content which is an svg chart to come perfectly inside it without scrolls.

<div id="story-modal" class="modal hide fade" >
  <div class="modal-header">
        <a href="#" class="close">&times;</a>
        <h3>1 Minute Story!</h3>
      </div>

    <div id="storyChart" >

    </div>
<script type="text/javascript">$("#storyChart").append($("<iframe />").attr("src", "/frame.html"));
</script>

</div>

Answer 1

Put following code

#story-modal {
height: 500px;
width: 590px;
}
#storyChart {
height: auto;
width: 100%;
position: relative;
overflow-y: hidden;
overflow-x: hidden;
}
Put this code in iframe
<iframe src="/frame.html" width="200" height="200" style="
    width: 100%;
    height: 520px;"></iframe>

for h1 some width is written because of which horizontal scroll is coming

.container h1{
width: 100%;
position: relative;
/* left: -100px; */
letter-spacing: -1px;
line-height: 60px;
font-size: 60px;
font-weight: 100;
margin: 0px 0 50px 0;
text-shadow: 0 1px 0 #fff;
}

It's working properly with this changes