html - 嵌套元素的高度问题

Question

我有嵌套元素。我有一个指定高度的外部 div。和一个高度为 100% 的内表。但是表格内容溢出了外层的div

 <div class="statistics">
    <table id ="statsTable">
      <tr>
        <th>Team1</th>
        <th>Team2</th>
        <th>Winner</th>
        <th>Win By run</th>
        <th>Win By Wicket</th>
      </tr>
      <tr *ngFor="let item of tableData">
        <td>{{item.team1}}</td>
        <td>{{item.team2}}</td>
        <td>{{item.winner}}</td>
        <td>{{item.win_by_runs}}</td>
        <td>{{item.win_by_wickets}}</td>
      </tr>
    </table>
  </div>

我的CSS-

    .statistics{
    height:400px;
    }
    #statsTable{
    color:white;
    height: 100%;
    }

我希望我的表格在外部 div 指定的高度内

Answer 1

请参阅此代码笔 https://codepen.io/rensmateyo/pen/oNvjJbQ , Overflow: auto; 似乎可以正常工作