在IE Edge上使用“display：table”跟随flexbox中的可滚动内容的问题

Question

我有一个flexbox（display: flex）的容器。它有两个孩子，我有display: table div和一个可滚动元素。在Firefox和Chrome上，它工作正常（codepen相同）。

但是在Microsoft Edge上，如下面的快照所示，可滚动内容与表元素重叠。

Microsoft Edge的屏幕截图（这是问题）：

chrome的屏幕截图（完全正常，预期的行为）：

任何关于此的帮助/推理/解决方案都将受到赞赏。

以下是HTML部分：

<div class="container">
    <div class="wrapper">
        <p>Hi, this is the table</p>
        <p>Subtext for table</p>
    </div>
    <div class="below-table">
        <p>And this is bwlow the table</p>
        <p>And this is bwlow the table</p>
        ...
        <!--   Lot of such text, so as to make it scrollable   -->
    </div>
</div>

这就是CSS：

.wrapper {
    display: table;
    background-color: blue;
}
.below-table {
    overflow: scroll;
    background-color: yellow;
}
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: red;
}

Answer 1

Edge似乎忽略了表格的内容，如果它们是flex的直接后代，如果你在表格周围添加一个包装div，它应该解决你的问题Edge

body {
  margin: 0;
}

.table {
  display: table;
  background-color: blue;
}

.below-table {
  overflow: scroll;
  background-color: yellow;
  flex-grow: 1;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: red;
}

<div class="container">
  <div class="wrapper">
    <div class="table">
      <p>Hi, this is the table</p>
      <p>Subtext for table</p>
    </div>
  </div>
  <div class="below-table">
    <p>And this is bwlow the table</p>
    <p>And this is bwlow the table</p>
    <p>And this is bwlow the table</p>
    <p>And this is bwlow the table</p>
    <p>And this is bwlow the table</p>
    <p>And this is bwlow the table</p>
    <p>And this is bwlow the table</p>
    <p>And this is bwlow the table</p>
    <p>And this is bwlow the table</p>
    <p>And this is bwlow the table</p>
    <p>And this is bwlow the table</p>
    <p>And this is bwlow the table</p>
    <p>And this is bwlow the table</p>
    <p>And this is bwlow the table</p>
    <p>And this is bwlow the table</p>
    <p>And this is bwlow the table</p>
    ...
    <!--   Lot of such text, so as to make it scrollable   -->
  </div>
</div>