Angular Material md-content 压缩模拟元素答案

【问题标题】：Angular Material md-content compresses simbling elementAngular Material md-content 压缩模拟元素
【发布时间】：2016-04-03 17:02:50
【问题描述】：

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

这是预期的行为，还是我错过了什么？

【问题讨论】：

标签： css angularjs angular-material

【解决方案1】：

您可以禁止这种行为，一种方法是将您的 <div> 设置为 flex-shrink: 0。

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

【讨论】：

感谢您赐教。虽然您的解决方案解决了问题，但我认为使用 angular-material 指令会更好。在这种情况下，我通过在我的 div 中使用 flex="none" 来完成相同的结果。我想投票给你的回答，但我不能。
没问题。您仍然可以使用复选框将答案标记为正确，这将使您更接近投票权。

【解决方案2】：

感谢 Alex 的解释，我通过将 flex="none" 添加到 md-content simbling div 解决了我的问题。但是，Alex 的解决方案也可以。

【讨论】：

【解决方案3】：

使用 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>

【讨论】：