固定位置div的CSS溢出問題

Question

所以這個問題已經出現，現在已經解決了大概1000次（Scroll part of content in fixed position container,child div height 100% inside position: fixed div + overflow auto），但我似乎無法讓我的CSS行爲。

我想創建一個具有可滾動內部的彈出式div。我有一個應該覆蓋整個窗口的深灰色div，並且居中在窗口中應該是綠色div。內部div需要有一個邊距，並根據其內容進行尺寸調整，除非內容太大，然後需要滾動條。

我無法使滾動工作。我試過指定最大寬度/高度，但這些似乎被忽略。

HTML：

<div class='PopupPanelBG'> 
    <div class='PopupPanel'> 
     <div> 
      <div style='width: 1000px;'>some stuff that is really big</div> 
     </div> 
    </div> 
</div 

CSS：

.PopupPanelBG { 
    display: table; 
    background: rgba(0, 0, 0, 0.7); 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1000; 
    overflow: hidden; 
} 

.PopupPanel { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
    position: relative; 
    overflow: hidden; 
} 

.PopupPanel>div { 
    display: inline-block; 
    vertical-align: middle; 
    text-align: center; 
    opacity: 0.9; 
    background-color: #e1efbb; 
    border: 1px solid gray; 
    padding: 8px; 
    margin: 30px; 
    overflow : auto; 
} 

http://jsfiddle.net/QbmdK/

Answer 1

你擺弄過多與顯示性能和你沒有定義MAX-寬度。類似這樣的作品：

.PopupPanelBG { 
    display: table; 
    background: rgba(0, 0, 0, 0.7); 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1000; 
    overflow: hidden; 
} 

.PopupPanel { 
    display: table-cell; 
    vertical-align: middle; 
    /*text-align: center;*/ 
    position: relative; 
} 

.PopupPanel>div { 
    /*display: inline-block;*/ 
    /*vertical-align: middle;*/ 
    text-align: center; 
    opacity: 0.9; 
    background-color: #e1efbb; 
    border: 1px solid gray; 
    padding: 8px; 
    margin: 30px auto; 
    overflow : auto; 
    max-width: 50%; 
} 

Answer 2

所以...這種方法（百分比）。

http://jsfiddle.net/Agony/QbmdK/34/

（現在用垂直對齊！）

要注意的一點是，包裹div有一套max-width:50%而innerdiv有max-width:100%。這對於任何數量的數據都適用。