我有这样的 html:
<body layout="row" ng-app="myApp" ng-cloak="ng-cloak" ng-controller="main">
<md-content flex="100" layout="row" class="management-panelmd-background md-hue-1">
<md-card class="md-whiteframe-4dp detail">
<div layout="row" layout-align="begin begin" ng-repeat="item in vm.managementPanelsFields" style="margin-bottom: 30px;" class="row flex">
<div flex="40" ng-show="item.isVisible">{{item.name}}</div>
<div flex="60" ng-show="item.isVisible" class="spacing">
<div ng-if="item.IsMultipleValue" class="multiple">
<ul>
<li ng-repeat="e in item.value track by $index" layout="row" layout-align="begin end">
<div ng-if="item.fieldType == 'Int'" flex="45">
<md-input-container>
<label>{{item.watermarkText}}</label>
<input type="number" name="{{item.id}}-{{$index}}" ng-pattern="item.regexValidation" ng-required="item.isRequired" ng-model="item.value[$index]"/>
</md-input-container>
</div>
<div ng-if="item.complementary" flex="45">
<div ng-if="item.complementary.fieldType == 'Dropdown'">
<md-select ng-model="item.complementary.value[$index]">
<md-option ng-repeat="(key, value) in item.complementary.options" value="{{key}}">{{value}}</md-option>
</md-select>
</div>
</div>
<div flex="10" class="delete"><a ng-click="deleteValue(item, $index)">X</a></div>
</li>
</ul>
<md-button ng-click="newValue(item)" class="md-raised md-primary">ADD</md-button>
</div>
<div ng-if="!item.IsMultipleValue" layout="row">
<div ng-if="item.fieldType == 'TextArea'" flex="100" ng-class="{error: form[item.id].$error}">
<textarea name="{{item.id}}" ng-trim="false" ng-required="item.isRequired" ng-pattern="item.regexValidation" placeholder="{{item.watermarkText}}" ng-model="item.value"></textarea>
</div>
</div>
</div>
</div>
</md-card>
</md-content>
</body>
当我使用添加按钮创建动态输入时，该按钮位于输入旁边的文本区域上方，以及具有 ng-repeat="item in vm.managementPanelsFields"的 div 的高度 即使内容有更大的高度也不要改变。
这里是 code pen
最佳答案
高度不会改变，因为您使用的是 flex。每行都设置为 flex: 1，这意味着行之间的高度比将为 1:1 = 相同高度。
您的容器有 flex: 1 1 100%:这定义了内容的总高度将是屏幕高度的 100%，因此，每行将占据屏幕的 50%。我只能从你的问题中推断这不是你想要的。
您可以删除 layout="row"
md-content.management-panelmd-background.md-hue-1(flex="100")
这将解决动态高度问题。你没有说你要求的布局是什么，所以我建议了我自己的布局。
关于javascript - 当我在 Angular Material 中添加新元素时，布局 ="row"的高度不会改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39169382/