BFE.devでのAI解答例 - CSS 質問
5. modal の heightについて

.modals { display: flex; justify-content: center; align-items: center; height: 100%; }

.modal { width: 300px; max-height: 300px; overflow-y: auto; background-color: white; padding: 30px; border-radius: 5px; }

.modal-header { height: 50px; background-color: #f44336; border-top-left-radius: 5px; border-top-right-radius: 5px; }

.modal-body { margin-top: 30px; margin-bottom: 30px; background-color: #2973af; border-radius: 5px; }

```js

解説：

• .modals に flexbox を使用して水平・垂直方向に中央配置します。
• .modal の幅を指定し、高さには max-height を使って 300px まで伸ばせるようにします。また、overflow-y: auto;を指定して、300px を越える場合にはスクロールできるようにします。
• .modal の背景色を white に設定し、padding で余白を取ります。また、border-radius を指定して角を丸めます。
• .modal-header に高さを指定します。また、border-radius で角を丸めます。
• .modal-body にマージンを付けることで上下に余白を取ります。背景色や border-radius も指定して、枠を作成します。