Nested flexbox user interface with scrollable content displayed differently in Safari and in MS Edge

Question

See the frozen state of the DOM page in this Plunker .

The code should be modal with four tabs, from which the third content of the tab opens. It should look something like the image below (displayed in the latest Chrome): three side-by-side divs that contain overflowing content, and divs scroll. At the bottom there is a div containing the text of the construction method and a button. The same view is visible in Firefox.  

What I see in the last Safari:

After disabling the style, height: 10 pixels; from.heatmap-multiple-variable-container

Displayable Safari Content:

note that the third content div, which scrolls down, does not represent all of its content (the "Select All" line), as in Chrome. In addition, a div containing the Plotting method is not displayed.

In Microsoft Edge, there is a div containing the Plotting method, but the same scroll problem as in Safari exists.

Any ideas on how to change the layout of Flexbox to display the menu in the same way for all three browsers? I'm really stuck, so any pointers you can give me are appreciated.

Answer 1

Well, that was hard! Add this to your CSS and it should work. (checked in Safari)

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;
}

height: 100%; , . , CSS .

body, , . ng-include, , , .

, .