弹性列内的角度材料布局嵌套弹性行不会按预期划分空间答案

【问题标题】：Angular Material layout nested flex rows inside of flex columns do not divide space as expected弹性列内的角度材料布局嵌套弹性行不会按预期划分空间
【发布时间】：2016-03-23 07:47:51
【问题描述】：

我正在尝试布局我的窗口，以便外部 div 填充窗口的高度。它应该分为两列：左侧为 65%，右侧为 35%。右列应该分为三行：最上面一列是灵活的，中间一列应该是 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

【问题讨论】：

标签： css angularjs flexbox angular-material

【解决方案1】：

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

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

对于内部元素，您使用百分比flex-basis，这在 Chrome 上也是错误的。更好地使用 0 flex-basis 并使用 flex-grow 因子分配可用空间：

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

Fixed Plunker

【讨论】：

这行得通，谢谢。有没有办法在 Chrome 中跟踪此问题以了解问题何时解决？ caniuse.com 只是将 Chrome 显示为绿色。
@JBCP 不知道。注意 Flexbox 仍处于开发阶段。