Material - tab body - 100% height

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="mat-tab-group" style="background-color: lightblue; height: 600px;">
      <div class="mat-tab-header">
        <div style="display: inline-block; background-color: red; color: white; padding: 12px;">
          Tab header
        </div>
      </div>
      
      <div class="mat-tab-body-wrapper">
        <div class="mat-tab-body-active mat-tab-body">
          <div class="mat-tab-body-content">
            
            <div style="background-color: yellow; height: 100%;">
              <span>Content</span>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

// Code goes here

/* Styles go here */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.mat-tab-group {
  display: flex;
  flex-direction: column;
}

.mat-tab-header {
  display: flex;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.mat-tab-body-wrapper {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-grow: 1;
}

.mat-tab-body {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  overflow: hidden;
}

.mat-tab-body-active {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 1;
  flex-grow: 1;
}

.mat-tab-body-content {
  height: 100%;
  overflow: auto;
}