JSFiddle - React, Tailwind, and code Playground

by Tim McKay

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="k-dialog-wrapper">
  <div class="k-dialog">
    <div class="k-window-titlebar">Title</div>
    <div class="k-content">
      <div class="w-100 flex-grow-1x">
        <form>
          <div class="form-group row">
            <div class="col">
              Item
            </div>
          </div>
          <div class="form-group row">
            <div class="col">
              Item
            </div>
          </div>
          <div class="form-group row">
            <div class="col">
              Item
            </div>
          </div>
          <div class="form-group row">
            <div class="col">
              Item
            </div>
          </div>
          <div class="form-group row">
            <div class="col">
              Item
            </div>
          </div>
          <div class="form-group row">
            <div class="col">
              Item
            </div>
          </div>
          <div class="form-group row">
            <div class="col">
              Item
            </div>
          </div>
          <div class="form-group row">
            <div class="col">
              Item
            </div>
          </div>
          <div class="form-group row">
            <div class="col">
              Item
            </div>
          </div>
          <div class="form-group row">
            <div class="col">
              Item
            </div>
          </div>
          <div class="form-group row">
            <div class="col">
              Item
            </div>
          </div>
          <div class="form-group row">
            <div class="col">
              Item
            </div>
          </div>
          <div class="form-group row">
            <div class="col">
              Item
            </div>
          </div>
          <div class="form-group row">
            <div class="col">
              Item
        ...

CSS

.k-dialog-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  
  background-color: red;
}

.k-dialog {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  flex: 0 1 auto;
  max-height: 90vh;
  background-color: #fff;
}

.k-window-titlebar {
  padding: 1rem;
  flex: 0 0 auto;
}

.k-content {
  padding: 1rem;
  overflow-y: auto;
  flex: 1 1 auto;
  
  width: 10rem;
}