0

我正在尝试使用 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

4

1 回答 1

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;
}
于 2013-10-03T17:26:59.093 回答