JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
  <div class="container">
    <div class="header">
      <h1>HEADER</h1>
    </div>

    <div class="overflowElem">
      <ul>
        <li><a href="#">ITEM 1</a></li>
        <li><a href="#">ITEM 2</a></li>
        <li><a href="#">ITEM 3</a></li>
        <li><a href="#">ITEM 4</a></li>
        <li><a href="#">ITEM 5</a></li>
        <li><a href="#">ITEM 6</a></li>
        <li><a href="#">ITEM 7</a></li>
        <li><a href="#">ITEM 8</a></li>
        <li><a href="#">ITEM 9</a></li>
        <li><a href="#">ITEM 10</a></li>
        <li><a href="#">ITEM 11</a></li>
        <li><a href="#">ITEM 12</a></li>
        <li><a href="#">ITEM 13</a></li>
        <li><a href="#">ITEM 14</a></li>
        <li><a href="#">ITEM 15</a></li>
        <li><a href="#">ITEM 16</a></li>
        <li><a href="#">ITEM 17</a></li>
        <li><a href="#">ITEM 18</a></li>
        <li><a href="#">ITEM 19</a></li>
        <li><a href="#">ITEM 20</a></li>
        <li><a href="#">ITEM 21</a></li>
        <li><a href="#">ITEM 22</a></li>
        <li><a href="#">ITEM 23</a></li>
        <li><a href="#">ITEM 24</a></li>
        <li><a href="#">ITEM 25</a></li>
        <li><a href="#">ITEM 26</a></li>
        <li><a href="#">ITEM 27</a></li>
        <li><a href="#">ITEM 28</a></li>
        <li><a href="#">ITEM 29</a></li>
        <li><a href="#">ITEM 30</a></li>
        <li><a href="#">ITEM 31</a></li>
        <li><a href="#">ITEM 32</a></li>
        <li><a href="#">ITEM 33</a></li>
        <li><a href="#">ITEM 34</a></li>
        <li><a href="#">ITEM 35</a></li>
        <li><a href="#">ITEM 36</a></li>
        <li><a href="#">ITEM 37</a></li>
        <li><a href="#">ITEM 38</a></li>
        <li><a href="#">ITEM 39</a></li>
        <li><a href="#">ITEM 40</a></li>
      </ul>
    </div>
  </div>
</div>

CSS

div.box {
  width: 700px;
  border: 1px solid red;
  padding: 45px 20px 20px;
}

div.container {
  height: 500px;
  background-color: #bbb;
}

div.header {
  background-color: red;
  /* HEIGHT in pixels is unknown */
}

div.overflowElem {
  overflow-y: auto;
  /*
  CANNOT USE THIS BECAUSE i DON'T know the height of .header
  height: calc(100% - height of cathead in pixels);*/
}