Flexboxes overlapping in IE 11 - html

Question

I'm currently debugging a website to make it work on IE 11. Now there is one page, were there are two div tables inside a flexbox container. Under the container, there is another flexbox 'navLine', which should be positioned directly under the container. This works fine in every browser except IE 11. There the container and the navLine seem to overlap. Oddly enough, the navLine sticks to a button within the container. The button is within a cell of the div table, without any additional CSS properties.
Any help?
Here's the simplified code:
#NavLine
{
margin-bottom: 8px;
display: -webkit-flex;
display: -ms-flex;
display: flex;
justify-content: space-between;
align-items: center;
}
.SelectionBox
{
background: #f7f7f7;
border: 1px solid #d9d9d9;
padding: 16px;
margin-bottom: 16px;
min-width: 570px;
min-height: 410px;
}
.Container
{
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-justify-content: space-around;
-ms-justify-content: space-around;
justify-content: space-around;
width: 100%;
flex: 1 1 auto;
}
#Box1, #Box2
{
flex: 1 1 auto;
padding: 16px;
}
.Table
{
display: table;
table-layout: fixed;
overflow: hidden;
height: 100%;
width: 75%;
}
.Title
{
display: table-header-group;
width: 100%;
height: 80px;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
padding-left: 5px;
padding-right: 5px;
vertical-align: middle;
height: 70px;
}
<div class="Container">
<!-- First Box -->
<div id="Box1">
<div class="Table SelectionBox">
<div class="Title">
<h2>Box One</h2>
</div>
<div class="Row">
<div class="Cell">
<span>Some Item</span>
</div>
<div class="Cell">
<span>Some Value</span>
</div>
</div>
<div class="Row">
<div class="Cell">
<span>Some Item</span>
</div>
<div class="Cell">
<span>Some Value</span>
</div>
</div>
<div class="Row">
<div class="Cell">
<span>Some Item</span>
</div>
<div class="Cell">
<span>Some Value</span>
</div>
</div>
<div class="Row">
<div class="Cell">
<span>Some Item</span>
</div>
<div class="Cell">
<span>Some Value</span>
</div>
</div>
<div class="Row">
<div class="Cell"></div>
<div class="Cell">
<span> ([[result]]) Results</span>
<span>Reset (this is a button)</span>
</div>
</div>
</div>
</div>
<!-- Second Box -->
<div id="Box2">
<div class="Table SelectionBox">
<div class="Title">
<h2>Box Two</h2>
</div>
<div class="Row">
<div class="Cell">
<span>Some Item</span>
</div>
<div class="Cell">
<span>Some Value</span>
</div>
</div>
<div class="Row">
<div class="Cell">
<span>Some Item</span>
</div>
<div class="Cell">
<span>Some Value</span>
</div>
</div>
<div class="Row">
<div class="Cell">
<span>Some Item</span>
</div>
<div class="Cell">
<span>Some Value</span>
</div>
</div>
<div class="Row">
<div class="Cell">
<span>Some Item</span>
</div>
<div class="Cell">
<span>Some Value</span>
</div>
</div>
<div class="Row">
<div class="Cell"></div>
<div class="Cell">
<span> ([[result]]) Results</span>
<span>Reset (this is a button)</span>
</div>
</div>
</div>
</div>
</div>
<div id="NavLine">
<span>Back</span>
<span>Next</span>
</div>

Answer 1

The problem in IE is that height: 100% in .Table.SelectionBox is causing that element to overflow its container (#Box1). It then overlaps the #NavLine element, which is not causing any problem.
One way to fix the problem is to remove that height rule.

Answer 2

"IE 11 requires a unit to be added to the third argument, the flex-basis property" - see "known issues" tab https://caniuse.com/#feat=flexbox
also, a min-height might be required
so, try for example:
#container > div {
flex:1 1 8em;
min-height:8em;
}