与Chrome和Safari之间的灵活增长不一致

Question

如果我添加height: 100%，则以下代码可在Chrome中使用，但在Safari中无效。我试图让#view扩展来填充整个视口。

我很疑惑#main的高度为100％，即使我没有在style中添加它。为什么会这样？

＆＃13;

＆＃13;

html, body {
  height: 100vh;
}

#work-interface {
  height: 100%;
}

#main {
}

#view {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid black;
}

.flex-grow {
  flex: 1 0 auto;
}

＆＃13;

<div id="work-interface" class="container-fluid d-flex">
    <div class="row flex-grow">
        <div id="main" class="col-md-9 d-flex flex-column">
            <div id="view" class="flex-grow">
                <canvas id="canvas"></canvas>
            </div>
        </div>
        <div id="sidebar" class="col-md-3">
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;