JSFiddle - React, Tailwind, and code Playground

by Per Andersson

HTML

<div class="dialogOverlay">
  <div class="dialogBase">

    <div class="bodyTitlebar">
      Title bar
    </div>

    <div class="bodyContent">
      <h1>Body content Body content </h1>
      <p>body content</p>
      <h1>Body content</h1>
      <p>body content</p>
      <h1>Body content</h1>
      <p>body content</p>
      <h1>Body content</h1>
      <p>body content</p>
    </div>

  </div>
</div>

CSS

.dialogOverlay {
  z-index: 600;
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0,0,0,0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialogBase {
  position: relative;
  background-color: white;
  border: 1px solid black;
  z-index: 601;
  display: flex;
  flex-direction: column
}
.bodyTitlebar {
  background-color: gray;
  color: white;
  height: 50px;
  border-bottom: 1px solid black;
  padding: 5px;
  box-sizing: border-box;
}
.bodyContent {
  overflow-y: scroll;
  min-width: 120px;
  min-height: 70px;                     /*  title bar is 50 so we need the extra 70 here  */
  max-height: calc(75vh - 50px);        /*  compensate for title bar                      */
  max-width: 75vw;
  flex:1;
  padding: 5px;
}