JSFiddle - React, Tailwind, and code Playground

by mnk

HTML

<div class="dialog-header">
  Header
</div>
<div class="dialog-content">
  <div class="dialog-content-wrapper">
    <div>
      put the validation message there
    </div>
    <div class="form-container">
      <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </ul>
    </div>
  </div>
  
</div>
<div class="dialog-footer">
  OK
</div>

CSS

.dialog-content {
  background-color: #ddd;
  
  height: 400px;
}

.dialog-content-wrapper {
  height: 100%;
  background-color: red;
  overflow: hidden;
}

.form-container {
  overflow: auto;
  height: 100%;
}