Flexbox Column-Reverse in Firefox, Edge and Ie

function scrollToBottom(el) { el.scrollTop = el.scrollHeight; }scrollToBottom(document.getElementById('list'));

#list {  height: 250px;  overflow-y: scroll;  border: 1px solid black;}#inner-list {  display: flex;  flex-direction: column-reverse;}.item {  flex: 1;  padding: 2em;  border: 1px dashed green;}

<div id="list">  <div id="inner-list">    <div class="item">1</div>    <div class="item">2</div>    <div class="item">3</div>    <div class="item">4</div>    <div class="item">5</div>    <div class="item">6</div>    <div class="item">7</div>    <div class="item">8</div>    <div class="item">9</div>  </div></div>

Flexbox overflow-y: scroll not working in IE,Edge and Firefox

Never mind. I found a solution here. Seems like it is a bug in Flexbox itself.

Why on toggling flex-direction item with lowest order gets scrolled into the viewport?

I'm not sure why exactly this is, but I'm thinking it has to do with that the scroll works in that way - it starts out at the first element in the DOM.

According to MDN concerning the target of scroll (https://developer.mozilla.org/en-US/docs/Web/Events/scroll):

The event target (the topmost target in the DOM tree).

But here's a little hack that might fix it:

add item 0 to the top of the list <div class="item a0">000</div> and then do the following:

btn.addEventListener('click', () => {
    list.classList.toggle('reversed');
    if(list.classList.contains('reversed') ){
        list.children[0].style.order = 100;
    } else {
        list.children[0].style.order = 0;
    }
    list.children[0].scrollIntoView();
});

Why do Chrome and Firefox show different flex layout results?

Source of the Problem

Here is the source of the problem:

.flexContainer {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;
    align-content: flex-start; <-- problem
}

Background

The align-content property controls the cross-axis alignment of flex lines within the flex container. Think of flex lines as the rows or columns (depending on flex-direction) in which flex items live. Put another way, align-content distributes the space between and around flex lines, packing them to the top, bottom, center, etc. (see the full list of values).

Because align-content distributes space between and around flex lines, it can only work on multi-line flex containers. (A single-line extends across the full cross-axis length of the container leaving no free space for align-content to work.)

Obviously, a multi-line container is a container with more than one line (flex items have wrapped). Technically, however, a multi-line container is simply a container with flex-wrap: wrap or flex-wrap: wrap-reverse (regardless of whether flex items have wrapped, or even exist).

Same concept applies to a single-line flex container, which is a container with flex-wrap: nowrap. The align-content property has no effect in nowrap containers, as discussed above.

§ 8.4. Packing Flex Lines: the align-content
property

The align-content property aligns a flex container’s lines within
the flex container when there is extra space in the cross-axis,
similar to how justify-content aligns individual items within the
main-axis. Note, this property has no effect on a single-line flex
container.

§ 6. Flex
Lines

Flex items in a flex container are laid out and aligned within flex
lines, hypothetical containers used for grouping and alignment by the
layout algorithm. A flex container can be either single-line or
multi-line, depending on the flex-wrap property:

• A single-line flex container (i.e. one with flex-wrap: nowrap) lays out all of its children in a single line, even if that would
  cause its contents to overflow.

• A multi-line flex container (i.e. one with flex-wrap: wrap or flex-wrap: wrap-reverse) breaks its flex items across multiple lines, similar to how text is broken onto a new line when it gets too wide to fit on the existing line.

The Discrepancy between Chrome and Firefox / Edge

Looking again at your code:

body {
  background-color: teal;
}

.flexContainer {
  background-color: blue;
  border: 1px solid black;
  height: 300px;
}

.flexItem {
  background-color: red;
  border: 1px solid black;
}

.flexContainer {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
  align-content: flex-start;
}

.flexItem {
  flex: 0 1 0;
}

<div class="flexContainer">
  <div class="flexItem">1111111111111111111</div>
  <div class="flexItem">2222<br/>2222</div>
  <div class="flexItem">3333<br/>3333<br/>3333</div>
  <div class="flexItem">4444444444444444444</div>
</div>

body .multiple-variable-selection-columns-container {
    height: calc(100% - 66px);
}

body .modal-menu .tab-content {
    height: calc(100% - 57px);
}

body .modal-wide .modal-dialog .modal-content .modal-body {
    height: calc(100% - 110px);
}

ng-include {
    display: block;
}