UL中的子Div中斷

Question

我有一個嵌套的結構，其中一個div包含ul，而ul又包含div。我的要求是將大多數內部div的內容顯示在ul或外部div的寬度（邊界）之外。

/* Positioning */ 
 
    #box1 { 
 
     position: absolute; 
 
     overflow: hidden 
 
    } 
 
    #box2 { 
 
     position: relative 
 
    } 
 
    #box3 { 
 
     position: absolute; 
 
     top: 10px 
 
    } 
 
    /* Styling */ 
 
    #box1 { 
 
     background: red; 
 
     padding: 5px; 
 
     width: 125px 
 
    } 
 
    #box2 { 
 
     background: blue; 
 
     padding: 2px; 
 
     width: 125px; 
 
     height: 100px 
 
    } 
 
    #box3 { 
 
     background: green; 
 
     padding: 2px; 
 
     width: 500px; 
 
     height: 150px 
 
    }

<div id="box1"> 
 
    <ul id="box2"> 
 
    <li> 
 
     <div id="box3" /> 
 
    </li> 
 
    </ul> 
 
</div>

參考https://jsfiddle.net/ob641d3s/

注：這是工作在Chrome 47但它停止在Chrome 49開始在Mac上工作。這是在Chrome + Windows仍然工作

Answer 1

在#box1取出overflow: hidden財產，這是很好:)

Fiddle

Answer 2

感謝響應大家，

我能找到一個網頁，非常清楚地解釋瞭解決方案，並且按照以下頁面中描述的步驟解決了我的問題。

https://css-tricks.com/popping-hidden-overflow/