Question

我正在尝试使用flexbox构建两个并排的可滚动面板：

HTML：

<div class"scrollable"></div>
<div class"scrollable"></div>

SASS

@import "flex"

*
  padding: 0
  margin: 0

html
  height: 100%

body
  height: 100%
  width: 100%
  +flexbox()

.scrollable
  overflow-y: auto
  min-height: 0
  +flex-grow(1)

它在最新版本的Chrome和Firefox中运行良好，但在Safari 6中，滚动条缺失。对此为何的任何想法？

我正在将这个mixin用于flexbox，它应该支持Safari的flexbox实现：https://github.com/mastastealth/sass-flex-mixin/blob/master/flex.scss

Answer 1

Flexbox 2009不仅仅是Flexbox规范的一个版本，它具有不同的名称和少量属性。有两个微妙的东西在两者之间没有转换，加上2009 Flexbox规范的每个实现都是错误的。

无论出于何种原因，将高度设置为100％，而不是使用最小高度为0，有助于Safari确定需要添加滚动条（并且似乎不会对其他浏览器产生负面影响）

http://cssdeck.com/labs/4plssmrq

/* line 5, ../sass/rar.sass */
* {
  padding: 0;
  margin: 0;
}

/* line 9, ../sass/rar.sass */
html {
  height: 100%;
}

/* line 12, ../sass/rar.sass */
body {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

/* line 17, ../sass/rar.sass */
.scrollable {
  overflow-y: auto;
  height: 100%;
  width: 50%;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

使用flexbox在Safari 6中并排滚动

1 个答案: