Minimum and Maximum Width Property in CSS

max-width

The max-width property in CSS is used to define the maximum width of an element. The value of the width cannot be larger than the value by max-width. If the content is larger than the max-width then it will go to the next line and if the content is smaller than max-width then it has no effect.

min-width

The min-width property in CSS is used to define the minimum width of an element. The value of the width cannot be less than the value of min-width. If the content specified within the element is smaller, min-width maintains the specified minimum width.

Value	used for
length	The default value is 0. Defines the minimum width in px, cm, etc
%	The defines the minimum width in percent of the containing block

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      box-sizing: border-box;
      border:5px solid red;
      padding: 15px;
      min-width: 300px;
      max-width: 500px;
    }
    img{
      width: 100%;
    }
  </style>
</head>
<body>
  <h1>min-width & max-width in CSS</h1>
  <div>
   <img src="pic.jpg" alt=""> 
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum saepe dolorum ab harum necessitatibus exercitationem laudantium et sint! Recusandae numquam quibusdam laborum eveniet iure optio exercitationem perferendis et vero ullam.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum saepe dolorum ab harum necessitatibus exercitationem laudantium et sint! Recusandae numquam quibusdam laborum eveniet iure optio exercitationem perferendis et vero ullam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum saepe dolorum ab harum necessitatibus exercitationem laudantium et sint! Recusandae numquam quibusdam laborum eveniet iure optio exercitationem perferendis et vero ullam.
  </div>
</body>
</html>

Output