AI solution for CSS coding question on BFE.dev
5. modal with max height

Here's the CSS code to achieve the modal with max height:

.modals { position: fixed; top: 30px; bottom: 30px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; }

.modal { width: 300px; max-height: 300px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #ccc; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); overflow: hidden; }

.modal-header { height: 50px; background-color: #f44336; }

.modal-body { flex-grow: 1; background-color: #2973af; overflow-y: auto; padding: 20px; }

Explanation:

• .modals: Position the modals container fixed with 30px from top and bottom of viewport. Align its content to center horizontally and vertically using flexbox.
• .modal: Set the width of the modal to 300px and max-height to 300px. Display as flex container with column direction to allow the header and body to stretch. Add a 1px solid border and a box-shadow for design purposes. Also, set the overflow to hidden to prevent content from overflowing the modal height limit.
• .modal-header: Set the height of the header to 50px and background color to #f44336 as per requirement.
• .modal-body: Allow the body to stretch using flex-grow. Set the background color to #2973af and also set overflow-y to auto to allow scrollbar if the content exceeds the height of the modal body. Lastly, add some padding for design purposes.