html - 带有溢出滚动的 Flexcontainer

Question

我在 FF 中遇到 flexcontainer div 问题，我该如何解决这个问题？这是我的代码示例

<div id="holder">
   <div id="content"></div>
</div>

元素的css

#holder {
   border: 1px solid #eee;
   display: flex;
   flex-direction: column-reverse;
   justify-content: flex-start;
   overflow: auto;
}
#content div {
   height: 110px;
   border-top: 1px solid black
}

这里的js动态添加div到content中

<script type="text/javascript">

    var C = document.getElementById('content');
    var H = document.getElementById('holder');
    var rowNum = 0;
    setInterval(function() {
    var row = document.createElement('div');
    row.innerHTML = 'Row #' + rowNum++;
    C.appendChild(row);
    }, 2000);

    H.addEventListener('scroll', function(e) {
    var bottomDiff = C.getBoundingClientRect().bottom - 
    H.getBoundingClientRect().bottom;

    var oldScrollTop = H.scrollTop;
    H.classList.toggle('manualScroll', bottomDiff > 0);
    if (bottomDiff > 0) {   H.scrollTop = oldScrollTop; }
    });
</script>

Answer 1

检查您的代码后，我发现您应该将 overflow:auto 添加到 #content 而不是 #holder

var C = document.getElementById('content');
    var H = document.getElementById('holder');
    var rowNum = 0;
    setInterval(function() {
    var row = document.createElement('div');
    row.innerHTML = 'Row #' + rowNum++;
    C.appendChild(row);
    }, 2000);

    H.addEventListener('scroll', function(e) {
    var bottomDiff = C.getBoundingClientRect().bottom - 
    H.getBoundingClientRect().bottom;

    var oldScrollTop = H.scrollTop;
    H.classList.toggle('manualScroll', bottomDiff > 0);
    if (bottomDiff > 0) {   H.scrollTop = oldScrollTop; }
    });

#holder {
   border: 1px solid #eee;
   display: flex;
   flex-direction: column-reverse;
   justify-content: flex-start;
   overflow: auto;
}
#content div {
   height: 110px;
   border-top: 1px solid black
}
#content {
overflow:auto
}

<div id="holder">
   <div id="content"></div>
</div>