post: max-width and min-width css

<!DOCTYPE html>
<html>
<head>
<style>
*{
 padding: 0;margin:0; box-sizing: border-box; 
}
.container{
 background-color: hsl(200,100%,40%);
 width: 80%;
 height: 100px;
 margin: 0 auto;
 margin-top: 80px;
}
.item1{
 outline: 4px solid hsl(200,100%,80%);
 min-width: 350px;
 max-width: 450px;
 height: 100%;
 font-size: 40px;
 color: snow;
 text-align: center;
 line-height: 100px;
}
</style>
</head>
<body style="background-color: #000;">
<div class="container">
  <div class="item1"></div>
</div>

<script>
  function sizeWidth() {
    const JSitem1 = document.getElementsByClassName('item1')[0];
    const JSwidth = JSitem1.offsetWidth;
    JSitem1.textContent = `${JSwidth}`;
  };
  
  window.addEventListener("resize",sizeWidth)
  sizeWidth();

</script>

</body>
</html>

In the first image, the border is 450 pixels wide, which means the max-width is set to 450 pixels. This prevents it from growing any larger. We’ve also set a min-width of 350 pixels, so the border can shrink only to that minimum size it won’t get any smaller than 350 pixels.

If you make the browser window smaller, the border stops shrinking at 350 pixels. That’s because of the min-width property. As you can see, the border overflows outside the container (the blue box).

The ability to shrink or grow our border (item1) also depends on using percentage (%) and viewport width (vw) units relative to its parent. For example, our container uses 80% of the body width. The body itself uses 100% width, while the HTML element has a width set to auto or 100%.

max-width and min-width css

Labels