Angular Material md-content 压缩模拟元素

Question

我有一个 md-content 元素，它在溢出时压缩一个模拟元素。这是一个 pen，您可以在其中删除 <md-content></md-content> 中的内容，您将看到它的模拟（即 <div layout="row"..></div>）如何获得其原始大小。

这是预期的行为，还是我遗漏了什么？

Answer 1

使用 display:block & float 如：

<div layout="row" style="display:block">
            <md-button class="md-icon-button" aria-label="Previous section" ng-click="seccionesCtrl.anterior()" style="float:left">
                A
            </md-button>

            <md-button class="md-icon-button next" aria-label="Next section" ng-click="seccionesCtrl.siguiente()"style="float:right">
                b
            </md-button>
</div>

Answer 2

您可以抑制此行为，一种方法是将 <div> 设置为 flex-shrink: 0。

在同级 <div> 上使用 layout="row" 将其设置为 display: flex，允许它压缩其内容以适应其不断增长的同级 <md-content>。

Answer 3

感谢 Alex 的解释，我通过将 flex="none" 添加到 md-content 模拟 div[=15= 来解决我的问题].但是，亚历克斯的解决方案也可以。

Angular Material md-content 压缩模拟元素

Angular Material md-content compresses simbling element

css

angularjs

angular-material