div 的高度不是直接父级

Question

我目前仅在 Chrome 中遇到一种奇怪的行为。

代码如下：

HTML

<div id="contacts">
    <div class="ui segment contacts-header"></div>
        <div class="contacts-content">
            <div class="table-wrapper">
                <div class="table-header"></div>
                <div class="table-inner-wrapper">
                    <table class="ui padded unstackable table">
                        <thead>
                            <tr>
                                <th class="five wide">
                                    <div class="th-inner first username">Name</div>
                                </th>
                                <th class="one wide">
                                    <div class="th-inner"><i class="star icon"></i></div>
                                </th>
                                <th>
                                    <div class="th-inner">Status</div>
                                </th>
                                <th class="three wide">
                                    <div class="th-inner">Lists</div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

少

#contacts {
    height: 100%;
    display: flex;
    flex-direction: column;
    .contacts-header {
        width: 100%;
        border-radius: 0;
        margin-bottom: 0;
        width: 100%;
        padding: 2em;
        border-bottom: 1px solid #D0D0D0;
        flex-shrink: 0;
    }
    .contacts-content {
        overflow: auto;
        height: 100%;
        .table-wrapper {
            font-size: 0.85em;
            padding-top: 3.4em;
            position: relative;
            height: 100%;
            .table-header {
                background-color: #F0F0F0;
                position: absolute;
                height: 3.4em;
                right: 0;
                left: 0;
                top: 0;
                z-index: 2;
                border-bottom: 1px solid #D4D4D5;
            }
            .table-inner-wrapper {
                overflow-x: hidden;
                overflow-y: auto;
                height: 100%;
                .table {
                    width: 100%;
                    border: 0;
                    margin: 0;
                    border-radius: 0;
                    border-bottom: 1px solid #CCC;
                    .th-inner {
                        position: absolute;
                        top: 0;
                        z-index: 3;
                        padding: 1em;
                        border-left: 1px solid #D4D4D5;
                        &.first {
                            border-left: none;
                        }
                    }
                }
            }
        }
    }

问题在于 div .table-wrapper 继承了 #contacts div 的高度，而不是其直接父级 .contacts-content 的高度。

这打破了我的布局，因为我在.table-inner-wrapper 中使用了overflow-y: auto;，当然滚动条永远不会显示，因为.table-wrapper div 的高度不好。

让我告诉你区别：

Chrome（越野车）

火狐

现在只是为了显示奇怪的行为，这里是 Chrome 屏幕期间 div 的大小：

• .contacts: 388px
• .contacts-header: 167px
• .contacts-content: 221px
• .table-wrapper: 388px
• .table-inner-wrapper: 348px

所以，.table-wrapper 的高度应该是：388 - 167 = 221px 当我手动设置此高度时，我会使用滚动条获得预期的视觉效果。

注意：仅作记录，这里的代码是一个纯css中带有粘性表头的表格。我跟着这个：http://salzerdesign.com/test/fixedTable.html

谢谢

威廉

Answer 1

经过认真挖掘（不是开玩笑），我找到了答案。 这是一个 chrome 错误，在此处详细说明：https://code.google.com/p/chromium/issues/detail?id=341310

上一篇文章给了我一个线索：https://github.com/philipwalton/flexbugs/issues/28

我不会在这里给出代码，因为 rinick 对 github 问题的解释非常清楚。

在我的例子中，我在 .table-wrapper 之前创建了一个新的包装器，其 css 如下：

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;