Flex + 溢出组合在 Safari 10 中不起作用

Question

我似乎无法在 Safari 中使用这种 flex + overflow 组合。

JSFiddle：https://jsfiddle.net/9dtrr84c/2/

<div class="container-fluid">
  <div class="row parent">
    <div class="col-12 col-sm-7 left">
      <div class="row top">
        <div class="col">Top</div>
      </div>
      <div class="row bottom">
        <div class="col-sm-7 my-list-container">
          <ul class="list-group">
            <div class="list-group-item dummy-item">Dummy item</div>
            <div class="list-group-item dummy-item">Dummy item</div>
            <div class="list-group-item dummy-item">Dummy item</div>
          </ul>
        </div>
        <div class="col-sm-5 flex-end">
          This should be flex end
        </div>
      </div>
    </div>
    <div class="hidden-xs-down col-sm-5 right">
    </div>
  </div>
</div>

还有css：

/* With bootstrap v4 */
/* https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css */

html,
body,
.container-fluid,
.parent {
  height: 100%;
}

.dummy-item {
  height: 300px;
}

.left {
  display: flex;
  flex-direction: column;
}

.left .top {
  flex-shrink: 0;
}

.left .bottom {
  flex-shrink: 1;
  flex-basis: 100%;
  display: flex;
}

.my-list-container {
  overflow-y: auto;
}

.flex-end {
  align-self: flex-end;
}

列表应展开以占用尽可能多的空间并溢出滚动条。

这在 Chrome 中按预期工作。由于我使用的是 10.1.2，因此似乎不是“此版本的 Safari 不支持 flex”。我不需要旧的浏览器支持，因此可以接受现代解决方案

任何帮助表示赞赏！非常感谢！

Answer 1

设法解决它：https://jsfiddle.net/9dtrr84c/8/

• 已将flex-wrap: nowrap; 添加到父容器