html - 使用 flexbox 在 Safari 6 中并排滚动

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 中缺少滚动条。任何想法为什么会这样？

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

Answer 1

Flexbox 2009 不仅仅是 Flexbox 规范的一个版本，它具有不同的名称和更少的属性。两者之间有许多微妙的东西无法转换，而且 2009 Flexbox 规范的每个实现都存在错误。

无论出于何种原因，将高度设置为 100% 而不是使用 min-height 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;
}