CSS max-width

Home / CSS / CSS max-width

CSS max-width


CSS max-width:

The CSS max-width property is used to set the maximum width of an element.

Example:

 
<style>
    .box{
      max-width: 500px;
      display: flex;
      gap: 10px;
    }
    .box1{
      height: 100px;
      width: 100px;
      background-color: blue;
    }
    .box2{
      height: 200px;
      width: 200px;
      background-color: rgb(0, 255, 255);
    }
    .box3{
      height: 300px;
      width: 300px;
      background-color: rgb(255, 68, 0);
    }
    .box4{
      height: 400px;
      width: 400px;
      background-color: rgb(0, 255, 0);
    }
    .box5{
      height: 500px;
      width: 500px;
      background-color: yellow;
    }
  </style>
<body>
  <div class="box">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5"></div>
</div>
</body>

Output: