JSFiddle - React, Tailwind, and code Playground

HTML

<header>header</header>
<div class="wrapper">
  <h3>my list</h3>
  <div class="list-container">
    other stuff
    <div class="list">
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>

        
    </div>
  </div>
  <div class="btn-wrapper">
    <button>
      btn1
    </button>
    <button>btn2</button>
  </div>
</div>

CSS

html, body{
    padding:0;
    margin:0;
    height:100%;
    
}

header {
  text-align:center;
  position: fixed;
  width: 100%;
  border: 1px black solid;
  height: 30px;
}

.wrapper {
		height: 100%;
		width: 100%;
    border: 1px red solid;
    padding-top: 30px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
    box-sizing: border-box;
	}

	h3 {
		margin-right: 20px;
	}

	.list-container {
		display: flex;
		flex-direction: column;
		padding: 20px;
		width: 50%;
		height: 100%;
	}

	.list {
		height: 100%;

		overflow-y: auto;
		overflow-x: hidden;

		border: 1px black solid;
	}