html - 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 上工作，但在 Mac 上从 Chrome 49 开始停止工作。这仍然适用于 Chrome + Windows

Answer 1

删除 #box1 上的 overflow: hidden 属性，这很好:)

Fiddle