I am having issues with a flex container div in Firefox. How can I resolve this problem? Here is an example of my code:
<div id="holder">
<div id="content"></div>
</div>
Here is the CSS for the element:
#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
}
And here is the JavaScript that dynamically adds a div into the 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>