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

Most discussions here are not providing context; so hopefully this will help beginners (like myself) to learn. Feel free to ask any questions
<pre class="shiki github-dark shaku"><code>.modals { /* req 3: modal is centered in viewport */ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; /* req 4: min 30px space to viewport top &amp; bottom. */ padding: 30px 0;}.modal { width: 300px; /* provided by question */ display: flex; flex-direction: column; /* req 2: max height 300px */ height: 100%; max-height: 300px;}.modal-header { background-color: #f44336; /* provided by question */ width: 100%; /* req 1: fixed height basis of 50px header (flex-dir of container is "column") */ /* alternatively, can set height:50px, flex-grow: 0, flex-shrink: 0 */ flex: 0 0 50px;}.modal-body { background-color: #2973af; /* provided by question */ width: 100%; /* req 1: stretching height body */ flex: 1;}</code></pre>