Safari Flex容器不包含子代

Question

所以我有一个具有视口大小的主容器。然后我要增加一行以填充主容器的剩余空间，并希望它包含其子容器（意味着具有其子容器的高度）。当前的实现在chrome，edge，firefox中工作正常，但在safari / ie11中却不能。在野生动物园中，行计算的高度始终是主容器的高度。下面是一个小提琴，显示了我的问题。降低窗口的高度并检查行/列。已在Safari 12.1的最新版本上进行了测试。

https://jsfiddle.net/b8t69wxp/9/

<div id="app">
  <b-container fluid class="main d-flex flex-column m-0 px-2 px-md-3 pt-2 pt-md-3">
    <b-row no-gutters class="flex-grow-1 w-100 pb-2 pb-md-3">
      <b-col md="6" lg="8" class="d-flex flex-column pt-2 pt-md-0" order="2" order-md="1">
        <div class="fragment1 flex-grow-1"></div>
      </b-col>

      <b-col md="6" lg="4" class="d-flex flex-column pl-0 pl-md-2" order="1" order-md="2">
        <div class="fragment2"></div>
        <div class="fragment3"></div>
        <div class="fragment4 flex-grow-1"></div>
      </b-col>
    </b-row>
  </b-container>
</div>

html, body{
  height: 100%;
}

#app {
  height: 100%;
}

.main {
  height: 100%;
  overflow: auto;
}

.fragment1 {
  background-color: red;
  min-height: 600px;
}

.fragment2 {
  background-color: blue;
  height: 100px;
}

.fragment3 {
  background-color: yellow;
  height: 200px;
}

.fragment4 {
  background-color: purple;
  min-height: 400px;
}