若有剩余空间则剩余填充.jsx

<div id="root">
  <div class="container">
    <Header class="header">Header</Header>
    
    <div class="auto-fill">
      auto fill <br />
      auto fill <br />
      auto fill <br />
      auto fill <br />
      auto fill <br />
      auto fill <br />
      auto fill <br />
      auto fill <br />
      auto fill <br />
      auto fill <br />
      auto fill <br />
      auto fill <br />
      auto fill <br />
      auto fill <br />
      auto fill <br />
      auto fill <br />
      auto fill <br />
      auto fill <br />
      auto fill <br />
      auto fill <br />
      auto fill <br />
      auto fill <br />
      auto fill <br />
    </div>
  </div>
</div>

html, body, #root, main {
    height: 100%;
}
body {
    margin: 0;
    overflow: auto;
    background-color: white;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
header {
    height: 3.1875rem;
    flex: 0 0 3.1875rem;
    background-color: pink;
}
.auto-fill {
    padding: 0 0.75rem 3rem;
    box-sizing: border-box;
    background-color: skyblue;
    width: 100%;
    flex: 1 1 auto;
    overflow: auto;
    min-height: fit-content;
}

Demo