Flexboxes перекрываются в IE 11

Question

В настоящее время я отлаживаю веб-сайт, чтобы он работал на IE 11. Теперь есть одна страница, где есть две таблицы div внутри контейнера flexbox.Под контейнером есть еще один flexbox 'navLine', который должен быть расположен непосредственно под контейнером.Это прекрасно работает во всех браузерах, кроме IE 11. Там контейнер и navLine, кажется, перекрываются.Как ни странно, navLine придерживается кнопки внутри контейнера.Кнопка находится внутри ячейки таблицы div без каких-либо дополнительных свойств CSS.Любая помощь?

Вот упрощенный код:

#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

Проблема в IE заключается в том, что height: 100% в .Table.SelectionBox вызывает переполнение контейнера этим элементом (#Box1).Затем он перекрывает элемент #NavLine, что не вызывает никаких проблем.

Один из способов решения этой проблемы - удалить это правило высоты.

Answer 2

"IE 11 требует добавления единицы к третьему аргументу, свойству flex-based" - см. Вкладку "известные проблемы" https://caniuse.com/#feat=flexbox

, также может потребоваться минимальная высота

так, попробуйте например:

#container > div {
   flex:1 1 8em;
   min-height:8em;
}