角度材料选项卡在 chrome 中重叠页脚答案

【问题标题】：Angular material tabs overlap footer in chrome角度材料选项卡在 chrome 中重叠页脚
【发布时间】：2018-06-01 17:41:11
【问题描述】：

当标签内容大于窗口大小时，使用有角材料和它的标签组件，它似乎与页脚重叠 - 一个 md 工具栏。它似乎只发生在chrome中，而不是firefox中。这是plunker - 和代码：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="angular-material@master" data-semver="0.10.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.1/angular-material.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
    <script data-require="angular-aria@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular-aria.js"></script>
    <script data-require="angular-animate@*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-animate.js"></script>
    <script data-require="angular-material@0.10.1" data-semver="0.10.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.1/angular-material.min.js"></script>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl" layout="column">
    <md-toolbar>
      <div class="md-toolbar-tools">
        My favorite dive sites
      </div>
    </md-toolbar>
    <div flex>
      <md-content>
        <md-tabs md-border-bottom md-dynamic-height>
          <md-tab label="tab one">
            <md-content class="md-padding">
              <h1 class="md-display-1">The Title</h1>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
              <p class="md-body-1">
                Just a proposition
              </p>
            </md-content>
          </md-tab>
          <md-tab label="tab two"></md-tab>
        </md-tabs>
      </md-content>

    </div>
    <md-toolbar>
      <div class="md-toolbar-tools">
        Younderwater, 2015
      </div>
    </md-toolbar>
  </body>

</html>

我做错了吗？任何帮助都非常感谢

【问题讨论】：

标签： angularjs google-chrome angularjs-material

【解决方案1】：

将

上的 css 更新为：

flex: 1 0 auto;

【讨论】：

非常感谢它的工作原理。代码主要取自“Unraveling Angular Material”（amazon.com/Unraveling-Angular-Material-Complete-Samples-ebook/…），但它仅在 chrome 中存在这种重叠问题，您认为这是一个错误吗？
是的，这解决了 safari 和 chrome 的这个问题
太棒了。很高兴它为你工作。 '不确定这是否是一个错误。也许浏览器对 flex 的支持并不一致——我没有足够了解它。但是 'flex' 是 flex-grow、flex-shrink 和 flex-basis 的简写，因此在使用它时定义所有三个属性可能是最安全的。