Angular material 显示被剪裁的内容

Question

我目前正在开发 angular JS / Web 应用程序。目前遇到 md-content 元素中的某些内容被剪裁的问题。

例如，我有一个 body 标签，其样式为：overflow: hidden 和 child md-content 标签有 溢出：auto。尽管出现了滚动条，但我无法滚动到页面末尾

<md-content style='margin-left: 30px;margin-top: 10px' class="_md" layout="column">

     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIO </h3>
     <h3> AAAAAABECEDARIOSSSSS </h3>
</md-content>

如下所示，内容被剪裁了，并没有显示所有内容。

请检查最后一个标签信息：

<h3> AAAAAABECEDARIOSSSSS </h3>

未显示

Answer 1

你应该尝试这样的事情：

<div flex layout="row">
<md-content flex>

   <!-- Put all your titles or whatever here --> 

</md-content>
</div>

md-content 中当然有你的样式和 class 属性，只需在其中添加 flex 属性并将其放入 div

Angular material 显示被剪裁的内容

Angular material display content being clipped

html

javascript

css

angularjs

angular-material