Bootstrap 4 tab overflow content not scrolling

Question

Working on a Bootstrap 4 Holy Grail layout.

Each column should scroll overflowing content independently and without declaring a height. The far left column scrolls properly. The far right column though has a Bootstrap NAV/TAB widget. The third tab of which, MENU 2, contains overflowing content that won't scroll no matter what I try.

What am I missing? Any assistance would be appreciated!

Here is the pertinent CSS:

.flex_item2 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
overflow-y: auto;
}

Demo: https://www.codeply.com/go/Db0rEUYvXn

Thank you so much!

Answer 1

Found the issue. Apparently FF (35.0.1 +) and IE11 do not scroll well with nested flex boxes. Here are the workarounds.

firefox overflow-y not working with nested flexbox

https://github.com/philipwalton/flexbugs/issues/164

I will update the Bootstrap 4 Holy Grail layout code to reflect the workaround. Enjoy!