Fixed block with big content

Question

I have fixed block width width 100% and min-height 100%.
But when i add big image there (height of image is more then 1 screen), i can't scroll it.
Any suggestions?

JSFiddle: http://jsfiddle.net/e1yc2ab1/

$(document).ready(function() {
    for (var i = 0; i < 100; i++)
      $('body').append('123 TEST 123 <button onclick="$(\'#overlay\').show();">Open Preview</button><br />');   
    
    $('#overlay,.hidden-image').on('click', function() {
        $('#overlay').hide();
    });
});

html, body {
    margin: 0;
    padding: 0;
}

#overlay {
    width: 100%;
    min-height: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    padding: 10%;
    display: none;
}

.hidden-image {
    width: 80%;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='overlay'>
    <div class="hidden-image">
        <img src='http://s4.pikabu.ru/images/previews_comm/2014-10_5/14140625135057.png' />
    </div>
</div>

Answer 1

Now it works! I did it in that way:

.hidden-image {
    position: absolute;
    overflow-y: scroll;
    width: 100%;
}

Here is example:

$(document).ready(function() {
    for (var i = 0; i < 100; i++)
      $('body').append('123 TEST 123 <button onclick="$(\'#overlay\').show();">Open Preview</button><br />');   
    
    $('#overlay,.hidden-image').on('click', function() {
        $('#overlay').hide();
    });
});

html, body {
    margin: 0;
    padding: 0;
}

#overlay {
    width: 100%;
    min-height: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    padding-top: 5%;
    display: none;
}

.hidden-image {
    text-align: center;
    position: absolute;
    overflow-y: scroll;
    width: 100%;
    height: 80%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='overlay'>
    <div class="hidden-image">
        <img src='http://s4.pikabu.ru/images/previews_comm/2014-10_5/14140625135057.png' />
    </div>
</div>