Question

任何人都可以解释这种行为吗？我已经创建了两个水平堆叠的柔性盒，我希望这是一个全屏web应用程序的简单轮廓。但是，在我的顶部flexbox中添加内容似乎会扩展它，最终将底部的一个推离屏幕。

var buttonEl = document.getElementById('addButton');

buttonEl.addEventListener('click', function() {
    var newEl,
        ulEl;
    
    // Create a list item element
    newEl = document.createElement('li');
    newEl.innerHTML = "Test List Item";
    
    // Add the list item element to the list
    ulEl = document.getElementById('list');
    ulEl.appendChild(newEl);
}, false);

* {
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}
html {
    width: 100%;
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: lightblue;
}
#top {
    flex-grow: 1;
    overflow-y: auto;
}
#bottom {
    flex-basis: 1em;
}
li {
    width: 100%;
    height: 2em;
    line-height: 2em;
    background: white;
}

<div id="top">
    <button id="addButton">add list item</button>
    <ul id="list">
    </ul>
</div>
<div id="bottom">
    Bottom
</div>

Answer 1

以下是一种方法：http://jsfiddle.net/1ejgybmv/。

* {
    padding: 0px;
    margin: 0px;
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    background: lightblue;
}
#top {
    flex: 1 1 auto;
    overflow-y: auto;
}

#bottom {
    flex: 0 0 1em;
}

li {
    height: 2em;
    line-height: 2em;
    background: white;
}

Answer 2

很容易。您在顶部

定义了overflow:hidden的所有元素

* {
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}

然后用{：1}覆盖#top div的属性：

#top {
    flex-grow: 1;
    overflow-y: auto;
}

有效地杀死＆＃34;您最初定义的属性。只需摆脱overflow-y或定义overflow-y:hidden即可。请记住，CSS中的定义顺序非常重要，因此您在一个定义之后添加的所有内容都将被新定义覆盖

为什么我的flexbox扩展尽管溢出：hidden / auto？

2 个答案: