Angular Material 弹性列内的布局嵌套弹性行未按预期划分 space

Question

我正在尝试布局我的 window，以便外部 div 填充 window 的高度。它应该 divided 成两列：左边 65%，右边 35%。右边的列应该div分成三行：上面一行是灵活的，中间一行应该是 15%，下面一行应该是 20%。

奇怪的是外列配置工作正常（65/35 分割）但垂直分割没有按预期工作。

我正在Chrome测试，只需要支持Chrome。

这是我认为应该有效的HTML：

<div layout="row" flex ng-app="sandbox">
    <div layout="column" flex="65">
        flex-65
    </div>
    <div layout="column">
        <div layout="row" flex>
            flex
        </div>
        <div layout="row" flex="15">
            flex-15
        </div>
        <div layout="row" flex="20">
            flex-20
        </div>
    </div>
</div>

这是一个 plnkr:

http://plnkr.co/edit/XWNfOVHvCoBwVeE2krdK

Answer 1

Chrome 在 Flexbox 中不能很好地计算垂直百分比。所以删除以下内容，让默认的 align-self: stretch 发挥它的魔力。

.layout-fill {
  height: 100%; /* Remove this and use `auto` instead */
}

对于内部元素，您使用百分比 flex-basis，这在 Chrome 上也是错误的。最好使用 0 flex-basis 并使用 flex-grow factors 分配可用 space:

.layout-column > .flex    { flex: 65; }
.layout-column > .flex-15 { flex: 15; }
.layout-column > .flex-20 { flex: 20; }

Fixed Plunker

Angular Material 弹性列内的布局嵌套弹性行未按预期划分 space

Angular Material layout nested flex rows inside of flex columns do not divide space as expected

css

angularjs

flexbox

angular-material