JSFiddle - React, Tailwind, and code Playground

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">Titel</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;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    bottom: 0;
    right: 0;
}
.k-dialog {
    border-width: 1px;
    border-style: solid;
    display: flex;
    flex-direction: column;
    border-radius: .25rem;
    border-color: rgba(0,0,0,.2);
    background-color: #fff;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    flex: 0 1 auto;
    
    /* overflow-y: auto; /* Solution 1: Add this line */
    max-height: 100%; /* Solution 2: Replace with calc(100% - 1px) */
}
.k-window-titlebar {
    padding: 1rem;
    border-width: 0 0 1px;
    border-style: solid;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    flex: 0 0 auto; /* */
    align-items: center;
    border-color: #e9ecef;
    color: #212529;
}
.k-content {
  color: #212529;
  padding: 1rem;
  outline: 0;
  overflow-y: auto;
  position: relative;
  flex: 1 1 auto;
  border-color: inherit;
  background: 0 0;
  display: flex;
}
.k-button-group {
  margin: 0;
  list-style: none;
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
  border-width: 1px 0 0;
  border-style: solid;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  flex: 0 0 auto;
  padding: 1rem;
  justify-content: flex-end;
  border-color: #e9ecef;
}