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 { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; padding: 30px 0;}.modal { width: 300px; display: flex; flex-direction: column; height: 100%; max-height: 300px;}.modal-header { background-color: #f44336; height: 50px; flex-shrink:0;}.modal-body { background-color: #2973af; flex-grow: 1; /* flex-grow does not work without content, can use min-height or flex-basis for initial height */ min-height: min(250px, calc(100% - 50px))}</code></pre>