Angular Material中嵌套列布局内的Flexbox在WebKit中不起作用答案

【问题标题】：Flexbox inside nested column layout in Angular Material not working in WebKitAngular Material中嵌套列布局内的Flexbox在WebKit中不起作用
【发布时间】：2016-05-26 05:41:31
【问题描述】：

我们正在尝试使用一个使用 Angular Material 嵌套在其他一些弹性盒中的弹性列。它适用于 Firefox，但不适用于 Chrome（48 或 50 版）或 Safari（9 版）。

下面是一些重现问题的代码：

<body layout="column">
    <div layout="row">navbar</div>
    <div flex layout="row">
      <div>sidebar</div>
      <div flex layout="row">
        <div id="content" layout="column">
          <div flex style="background-color: blue;">
            content1
          </div>
          <div flex="20" style="background-color: yellow;">
            content2
          </div>
        </div>
      </div>
    </div>

    <!-- ... -->
</body>

我们希望“content1”和“container2”分别填充 80% 和 20% 的容器，但在 WebKit 中都填充了 50% 的容器。

如果我们将 id 为 content 的元素的布局更改为 "row" 而不是 "column"，它可以在 WebKit 中工作，但我们需要将内容放在列中。

这是一个显示问题的代码笔：http://codepen.io/anon/pen/LGaRYX?editors=1000

【问题讨论】：

标签： google-chrome safari webkit flexbox angular-material

【解决方案1】：

为了使用列 flex，您的容器需要有一个指定的高度。如果您在每个外部容器上添加layout-fill，它们都将具有height: 100%，并且flex="20" 将起作用。但是，您将有一个滚动条，因为 100% 高度不考虑您的导航栏。您可以在外部容器上使用calc(100vh - NAVBAR_HEIGHT) 而不是layout-fill 来解决此问题。

<body layout="column">
<div layout="row" style="height: 50px">navbar</div>
<div layout="row" style="height: calc(100vh - 50px)">
  <div>sidebar</div>
  <div flex layout-fill layout="row">
    <div id="content" flex layout-fill layout="column">
      <div flex style="background-color: blue;">
        content1
      </div>
      <div flex="20" style="background-color: yellow;">
        content2
      </div>
    </div>
  </div>
</div>
</body>

http://codepen.io/kuhnroyal/pen/ZQPBxg

【讨论】：

如果导航栏的高度可以变化，那么没有办法实现我想要的吗？（我可能也想让它成为一个 flexbox）
您实际上可以在没有calc 的情况下做到这一点。您可以弯曲导航栏，但仍需要在主容器上设置高度。 codepen.io/kuhnroyal/pen/KVENjj