不能讓div溢出正常工作

Question

我希望有人可以幫我解決我遇到的問題。我正在嘗試設置一系列照片。這有這樣的CSS/HTML屬性：

http://jsfiddle.net/i_like_robots/7GvV2/embedded/result%2chtml%2ccss/

/* 
* Housekeeping 
*/ 
body { 
    font: normal 16px/1.5 Arial, sans-serif; 
} 

h1, p { 
    margin: 0; 
    padding: 0 0 .5em; 
} 

.container { 
    margin: 0 auto; 
    max-width: 480px; 
} 

/* 
* Caption component 
*/ 
.caption { 
    position: relative; 
    overflow: hidden; 

    /* Only the -webkit- prefix is required these days */ 
    -webkit-transform: translateZ(0); 
      transform: translateZ(0); 
} 

.caption::before { 
    content: ' '; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: transparent; 
    transition: background .35s ease-out; 
} 

.caption:hover::before { 
    background: rgba(0, 0, 0, .5); 
} 

.caption__media { 
    display: block; 
    min-width: 100%; 
    max-width: 100%; 
    height: auto; 
} 

.caption__overlay { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    padding: 10px; 
    color: white; 

    -webkit-transform: translateY(100%); 
      transform: translateY(100%); 

    transition: -webkit-transform .35s ease-out; 
    transition:   transform .35s ease-out; 
} 

.caption:hover .caption__overlay { 
    -webkit-transform: translateY(0); 
      transform: translateY(0); 
} 

.caption__overlay__title { 
    -webkit-transform: translateY(-webkit-calc(-100% - 10px)); 
      transform: translateY(calc(-100% - 10px)); 

    transition: -webkit-transform .35s ease-out; 
    transition:   transform .35s ease-out; 
} 

.caption:hover .caption__overlay__title { 
    -webkit-transform: translateY(0); 
      transform: translateY(0); 
} 

事實上，我從這個站點的代碼。

但是會有超過30張照片，所以我希望把它們放入一個滾動框/區域大約400h x 700w像素。當我通過HTML或CSS添加滾動框時，結果是相同的。有一個盒子，沒有滾動。所有照片都被縮小以適應盒子的內部。

任何人都可以幫我這個嗎？

謝謝。