溢出：隱藏移動div內

Question

我遇到了一個我無法解釋的事情，我也沒有在這裏或與Google找到一些答案。

我有以下代碼： （頭和其他結構形式的截斷這裏...）

<link rel="stylesheet" type="text/css" href="style.css"> 

<div id="wrapper"> 
    <div id="ajaxdiv"> 
     <div id="page0"> 
      <p>000000000 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p> 
     </div> 
    </div> 
</div> 

這個CSS：

#container { 
    width: 800px; 
    margin: 0 auto; 
} 
#wrapper { 
    overflow: hidden; 
} 

#ajaxdiv { 
    background-color: #e3e3e3; 
    height: 500px; 
    width: 800px; 
    position: relative; 
} 

現在的問題是，通過行'溢出：隱藏'在我的包裝div裏面，即ajaxdiv被取代。它向下移動約10-20px，我不知道爲什麼會發生這種情況。

有沒有人有解釋？

Answer 1

這是舊的崩潰邊緣問題。 You can read more about it here，但基本上，因爲p有裕量，所以它會是父母。 I've made a codepen for you with a fix.