溢出-y：滚动和位置：Chrome中的绝对错误

Question

当应用溢出-y：滚动和位置：绝对时，在 Chrome 中没有呈现 DIV（其高度保持为零）。如果其中任何一个被删除，则呈现该框。 这在 Firefox 中不会发生。

HTML

<div id="container">
    <div class="big"></div>
    <div>
        <ul>
            <li>Element #1</li>
            <li>Element #2</li>
            <li>Element #3</li>
            <li>Element #4</li>
            <li>Element #5</li>
        </ul>
    </div>
</div>

CSS

#container ul {
    list-style: none;
    margin: 0;
    overflow-y: scroll;
    position: absolute;
    top: 31px;
    left: 0;
    right: 0;
    bottom: 0;
}

#container {
    height: auto;
    display: -moz-box;
    display: -webkit-box;
    display: box;
}

#container div{
    position: relative;
    height: 100%;
    width: 200px;
}

#container div.big{
    height: 500px;
}

这是一个显示问题的小提琴： http://jsfiddle.net/351bj7k4/5/

Answer 1

导致问题的原因

其实不是bug。

通过使用 Chrome 开发者工具面板，您会看到 <ul> 元素及其父元素 <div> 的计算 height 被计算为 0。

<div id="container">
    <div class="big"></div>
    <div>  <!-- <= This -->
        <ul> <!-- <= And this -->
            ...

因为height 属性（应用于<div>）的百分比值与其父级的高度有关。

10.5 Content height: the 'height' property

百分比是相对于生成框的高度计算的 containing block。如果包含块 的高度不是 明确指定（即，它取决于内容高度），并且这个 元素不是绝对定位的，值计算为'auto'。

当<ul> 使用绝对定位从正常流中移除时，<div> 的计算高度将为0。因此，具有 bottom: 0 声明的 <ul> 元素将没有空间；所以<ul> 的计算高度也是0。

因此，如果您将overflow-y: scroll 声明应用于<ul>，它将隐藏所有列表项，因为它们都是开箱即用的。

解决办法

感谢Flexbox（您在容器上使用的display: box 旧语法），#container 中的<div> 元素默认填充其父元素的整个高度。

因此，您可以安全地删除 height: 100% 声明从导致问题的#container div 选择器，并且还使用弹性盒显示类型为<div> 使<ul> 填充整个身高：

EXAMPLE HERE （另一个HERE）

#container div {
    position: relative;
    /* height: 100%; */
    width: 200px;

    display: -moz-box;
    display: -webkit-box;
    display: box;
}

---

^{PS：为了检查旧答案 - 这有点误解 - click here。}