Let's create a modal 1. it has header(fixed height: 50px) and stretching body 2. width of 300px and total max height 300px 3. centered in viewport 4. …

6. different checkbox style

4. two-column layout

5. modal with max height

<pre class="shiki github-dark shaku"><code>.modals { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 30px 0;}.modal { width: 300px; height: 100%; max-height: 300px; display: flex; flex-direction: column;}.modal-header { background-color: #f44336; flex: 0 0 50px;}.modal-body { background-color: #2973af; flex: 1;}</code></pre>