div是获取高度不是直接parent

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 的高度而不是直接 parent .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 当我手动设置这个高度时，我得到了预期的视觉效果，带有滚动条。

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

谢谢

威廉

Answer 1

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

最后 post 给了我一个线索：https://github.com/philipwalton/flexbugs/issues/28

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

就我而言，我在 .table-wrapper 之前使用以下内容创建了一个新包装器 css:

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

div是获取高度不是直接parent

div is getting the height of not is direct parent

css

height

parent

flexbox