我目前正在开发基于角度的应用。
问题：我向md-stretch-tabs元素添加了md-tabs，但是当我切换到标签＃2时，我的标签会缩回，就像flex没有空间一样。
这是一个依赖问题还是代码本身？
编辑：添加完整代码。
var app = angular.module('BetaApp', ['ngMaterial']);
app.controller('SideNavController', function($scope, $mdSidenav) {
$scope.openLeftMenu = function() {
$mdSidenav('left').toggle();
};
$scope.closeLeftMenu = function() {
$mdSidenav('left').toggle();
};
});
app.config(function ($mdThemingProvider) {
var customPrimary = {
'50': '#7099cd',
'100': '#5d8bc7',
'200': '#4a7ec0',
'300': '#3e71b3',
'400': '#3865a0',
'500': '#31598d',
'600': '#2a4d7a',
'700': '#244167',
'800': '#1d3554',
'900': '#172941',
'A100': '#83a6d4',
'A200': '#96b4db',
'A400': '#a9c1e1',
'A700': '#101d2e',
'contrastDefaultColor': 'light'
};
$mdThemingProvider
.definePalette('customPrimary',
customPrimary);
var customAccent = {
'50': '#1c5956',
'100': '#226d68',
'200': '#28807b',
'300': '#2e948e',
'400': '#34a7a1',
'500': '#3abab3',
'600': '#5bccc6',
'700': '#6fd2cd',
'800': '#82d8d3',
'900': '#96deda',
'A100': '#5bccc6',
'A200': '#48c6bf',
'A400': '#3abab3',
'A700': '#a9e4e1',
'contrastDefaultColor': 'light'
};
$mdThemingProvider
.definePalette('customAccent',
customAccent);
var customWarn = {
'50': '#f7d1cb',
'100': '#f4bdb5',
'200': '#f1a99f',
'300': '#ee9688',
'400': '#ea8272',
'500': '#e76e5c',
'600': '#e45a46',
'700': '#e04630',
'800': '#d73720',
'900': '#c1321c',
'A100': '#fbe5e1',
'A200': '#fef8f8',
'A400': '#ffffff',
'A700': '#aa2c19',
'contrastDefaultColor': 'dark'
};
$mdThemingProvider
.definePalette('customWarn',
customWarn);
$mdThemingProvider.theme('default')
.primaryPalette('customPrimary')
.accentPalette('customAccent')
.warnPalette('customWarn');
});<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
</head>
<!--======================================================================================================================================-->
<!--
<md-icon md-font-set="material-icons">face</md-icon>
<i class="material-icons">menu</i>
-->
<!--======================================================================================================================================-->
<body ng-app="BetaApp" ng-cloak layout="column" ng-controller="SideNavController">
<md-toolbar md-whiteframe="3">
<div class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="More" ng-click="openLeftMenu()">
<i class="material-icons">menu</i>
</md-button>
<span>WideView</span>
<!-- fill up the space between left and right area -->
<span flex></span>
<md-button class="md-icon-button">
<i class="material-icons">search</i>
</md-button>
<md-button class="md-icon-button">
<i class="material-icons">filter_list</i>
</md-button>
<md-menu md-position-mode="target-right target">
<md-button class="md-icon-button" ng-click="$mdOpenMenu($event)">
<i class="material-icons">more_vert</i>
</md-button>
<md-menu-content>
<md-menu-item>
<md-button ng-click="doSomething()"><md-icon md-font-set="material-icons">refresh</md-icon>Refresh</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="doSomething()"><md-icon md-font-set="material-icons">view_quilt</md-icon>Change View</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
</md-toolbar>
<div layout="row" flex>
<md-content>
<md-tabs md-dynamic-height md-border-bottom md-stretch-tabs="always">
<md-tab label="one">
<md-content class="md-padding">
<h1 class="md-display-2">Tab One</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.</p>
</md-content>
</md-tab>
<md-tab label="two">
<md-content class="md-padding">
<h1 class="md-display-2">Tab Two</h1>
<span flex></span>
<md-input-container class="md-block" flex>
<label>Address</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex>
<label>Address</label>
<input>
</md-input-container>
</md-content>
</md-tab>
</md-tabs>
</md-content>
<md-fab-speed-dial md-direction="up" class="md-scale md-fab-bottom-right">
<md-fab-trigger>
<md-button aria-label="" class="md-accent md-fab">
<i class="material-icons">add</i>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="" class="md-fab md-raised md-mini">
<i class="material-icons">share</i>
</md-button>
<md-button aria-label="" class="md-fab md-raised md-mini">
<i class="material-icons md-accent">add_a_photo</i>
</md-button>
<md-button aria-label="" class="md-fab md-raised md-mini">
<i class="material-icons">create</i>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
<md-sidenav md-component-id="left" class="md-sidenav-left" md-whiteframe="3" layout="column">
<div layout="row">
<md-button class="md-icon-button">
<md-icon md-font-set="material-icons">new_releases</md-icon>
</md-button>
<span flex></span>
<md-button class="md-icon-button" ng-click="closeLeftMenu()">
<md-icon md-font-set="material-icons">arrow_forward</md-icon>
</md-button>
</div>
<md-card md-whiteframe="2">
<md-card-header>
<md-card-avatar>
<img class="md-user-avatar" src="images/BigDave.png"/>
</md-card-avatar>
<md-card-header-text>
<div layout="row">
<div layout="column">
<span class="md-title">BigDave</span>
<span class="md-subhead">logged in</span>
</div>
<span flex></span>
<md-menu md-position-mode="target-right target">
<md-button class="md-icon-button" ng-click="$mdOpenMenu($event)">
<i class="material-icons">arrow_drop_down</i>
</md-button>
<md-menu-content>
<md-menu-item>
<md-button ng-click="doSomething()"><md-icon md-font-set="material-icons">account_box</md-icon>Settings</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="doSomething()"><md-icon md-font-set="material-icons">exit_to_app</md-icon>Log out</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
</md-card-header-text>
</md-card-header>
</md-card>
<md-menu-item><md-button ng-click="doSomething()">Do Something</md-button></md-menu-item>
<md-menu-item><md-button ng-click="doSomething()">Do Something</md-button></md-menu-item>
<md-menu-item><md-button ng-click="doSomething()">Do Something</md-button></md-menu-item>
<md-menu-item><md-button ng-click="doSomething()">Do Something</md-button></md-menu-item>
<md-menu-item><md-button ng-click="doSomething()">Do Something</md-button></md-menu-item>
<md-menu-item><md-button ng-click="doSomething()">Do Something</md-button></md-menu-item>
<a class="ms-navigation-button ng-scope md-default-theme"e>
<i class="icon s16 icon-calendar-today" ng-if="node.icon"></i>
<span class="title ng-scope ng-binding flex" translate="" flex="">Calendar</span>
</a>
</md-sidenav>
</div>
<!--======================================================================================================================================-->
<!-- Angular Material requires Angular.js Libraries -->
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-animate/angular-animate.min.js"></script>
<script src="node_modules/angular-aria/angular-aria.min.js"></script>
<script src="node_modules/angular-messages/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="node_modules/angular-material/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>