Angular 7 flex 布局使 table 完全填充 parent 但不拉伸 parent

Question

您好，我对 stackblitz 中的示例有疑问。基本上我想在一页中限制 table 并填充 header 之后的其余高度。如果 table 的高度超过这个高度，我希望它隐藏起来。但是从这个例子来看，table 似乎延伸了它的 parent。我可以做些什么来限制 table 的高度？谢谢。

Answer 1

尝试设置 div 的 height 并使用 overflow 属性:

<div fxLayout='column' fxFill style=' border: red 10px solid'>
  <div>
    <h1>Header 1</h1>
  </div>
  <div style='border: 1px solid black; overflow: auto; height:100px' fxFill>
    <table fxFlex='100%'>
      <!-- The code omitted for the brevity -->
      <tr><td>a</td></tr>
      <tr><td>a</td></tr>
      <tr><td>a</td></tr>
      <tr><td>a</td></tr>
      <tr><td>a</td></tr>
    </table>
  </div>
</div>
</div>

更新：

另一种不固定高度的方式：

<div style="height: 100vh;">
<div fxLayout='column' fxFill style=' border: red 10px solid; display: flex; 
    flex-direction:column; position:absolute;top: 0; 
    bottom: 0; left: 0; right: 0;'>
  <div style="flex-shrink: 0;">
    <h1>Header 1</h1>
  </div>
  <div style='border: 10px solid orange; overflow-y: auto;' fxFill>
    <table fxFlex='100%'>
      <!-- The code omitted for the brevity -->
      <tr><td>a</td></tr>
      <tr><td>a</td></tr>
      <tr><td>a</td></tr>
      <tr><td>a</td></tr>
      <tr><td>a</td></tr>
    </table>
  </div>
</div>
</div>

Angular 7 flex 布局使 table 完全填充 parent 但不拉伸 parent

Angular 7 flex layout make table full fill parent but not stretch parent

angular-flex-layout

angular