CSS Property: min-width

The min-width property (English: Minimum width) defines the minimum width of an element. If the content is smaller than the minimum width, the minimum width is applied. If the content is larger, the property has no effect. This prevents the width value from being smaller than min-width.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>minimum width</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        button {
            display: block;
            margin-bottom: 20px;
            padding: 12px 16px;
            font-size: 20px;
            width: 500px;
        }
        .btn1 {min-width: 200px;}
        .btn2 {min-width: 600px;}
        .btn3 {min-width: 800px;}
    </style>
</head>
<body>
<button class="btn1">width: 500px; min-width: 200px;</button>
<button class="btn2">width: 500px; min-width: 600px;</button>
<button class="btn3">width: 500px; min-width: 800px;</button>
</body>
</html>

RESULT