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>

LESS

#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的高度。

这会打破我的布局，因为我在overflow-y: auto;中使用.table-inner-wrapper，当然滚动条永远不会显示，因为.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 bug，在此处详细说明：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;