Question

我似乎无法在Safari中使用此Flex +溢出组合。

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中使用。似乎不是“在这个版本的Safari中不支持flex”，因为我正在使用10.1.2。我不需要旧的浏览器支持，因此可接受现代解决方案

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

Answer 1

管理解决它：https://jsfiddle.net/9dtrr84c/8/

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

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

1 个答案: