Toggle navigation
☰
HTML
CSS
Scripting
Database
<!DOCTYPE html> <title>My Example</title> <style> .max-container { background-color: #e9ecef; border: 1px dashed #adb5bd; padding: 20px 0; display: flex; justify-content: center; border-radius: 8px; } .max-box { background-color: #0dcaf0; color: #000; font-family: sans-serif; font-weight: bold; text-align: center; padding: 30px 20px; border-radius: 8px; /* The box will take up 50% of the container's width. However, if 50% becomes less than 400px, it will stop shrinking and stay exactly at 400px. */ width: max(50%, 400px); } </style> <div class="max-container"> <div class="max-box"> width: max(50%, 400px) </div> </div>