當屏幕高於父div時，div被切斷

Question

This codepen顯示該問題。請注意，紅色塊.popup在頂部被切斷。

它被切碎的祖父母的頂部，div #hideExtraWidth。我需要隱藏額外的寬度（overflow-x），因爲我在我的實際實現中（JS更改了#wide div以創建旋轉木馬效果），但它似乎也隱藏了額外的高度（溢出-x） Y）...，即使我有這樣的：

overflow-x: hidden; 
overflow-y: visible; 

如果你把兩個溢出屬性..你會看到它修復被砍傷的頂部，但在休息，現在寬度溢出現在是可見以及。

如何避免.popup的頂部被切碎，同時保持水平溢出隱藏？

Answer 1

可悲的是，「‘visible’ becomes ‘auto’ also when combined with ‘hidden’」。解決方法：通過更改padding: 30px→padding: 130px，使容器足夠大以容納溢出，然後將其移回到位置margin-top: -100px。 Sample。

Answer 2

我已經將溢出更改爲#outer div ..這樣，您的旋轉木馬的所有內容都不會出現，您仍然可以彈出。

試試這個：

$(".item").one("mouseenter", function() { 
 
    $("<div>") 
 
    .addClass("popup") 
 
    .appendTo($(this)); 
 
});

#outer { 
 
    position: relative; 
 
    padding: 0 0 0 0; 
 
    width: 700px; 
 
    margin: 0 auto; 
 
    border: 1px solid red; 
 
    overflow: hidden; 
 
} 
 
#somethingElse { 
 
    text-align: center; 
 
    background-color: purple; 
 
    height: 100px; 
 
    color: white; 
 
} 
 

 
#hideExtraWidth { 
 
    width: 700px; 
 
    height: 570px; 
 
    padding-top: 30px; 
 
    padding-bottom: 25px; 
 
    margin: 0; 
 
    position: relative; 
 
    display: block; 
 
    white-space: nowrap; 
 
} 
 

 
#wide { 
 
    margin-left: -400px; 
 
    padding: 0; 
 
    width: 1500px; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    display: block; 
 
} 
 

 
.item { 
 
    border: 1px solid blue; 
 
    background-color: green; 
 
    white-space: normal; 
 
    width: 495px; 
 
    height: 515px; 
 
    padding: 0; 
 
    margin: 0; 
 
    display: inline-block; 
 
} 
 

 
.popup { 
 
    position: absolute; 
 
    top:-70px; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="outer"> 
 
    <div id="somethingElse">Something else</div> 
 
    <div id="hideExtraWidth"> 
 
    <div id="wide"> 
 
     <div class="item"></div> 
 
     <div class="item"></div> 
 
     <div class="item"></div> 
 
    </div> 
 
    </div> 
 
</div>