3

I get why min-width and max-width are useful, but I stumbled across CSS code that goes like this quite a few times now:

     #someDiv {
      min-width: 90vw !important;
      max-width: 90vw !important;
     }

and I wonder what the advantage of that approach would be vs this:

     #someDiv {
      width: 90vw !important;
     }

As far as I can tell, the effect is the same. Am I missing something here?

#parent {
  width: 500px;
  height: 300px;
  background: aqua;
}

#widthChild {
  height: 100px;
  background: red;
  width: 100px;
}

#minMaxChild {
  height: 100px;
  background: yellow;
  min-width: 100px;
  max-width: 100px;
}
<div id="parent">
  
  <div id="widthChild">
  width:100px
  </div>
  
  <div id="minMaxChild">
    min-width: 100px;
    max-width: 100px;
  </div>

</div>
Félix Paradis
  • 5,165
  • 6
  • 40
  • 49
  • Nice question, and good use of a stack-snippet! ... A side note: `!important` was really meant to be used by end-users to override site styles. As a site author you shouldn't need it -- it's basically a crutch to overcome not getting your CSS selector specificity and cascade correct... your snippet didn't use it and that works as expected. – Stephen P Jun 05 '18 at 19:14
  • 1
    @StephenP Thanks! I thought someone would bring that up... As a side note, I do my best to never ever use !important, but the lady who sat in my chair before me had different views (and she got fired >o< (true story)) – Félix Paradis Jun 05 '18 at 19:24
  • I don't understand why would someone define a width using max or min, It is a parent child relationship, meant to control the width of the content. – Rainbow Jun 05 '18 at 19:42
  • Looks like a quirk for setting a fixed width without explicitly specifying `width` property. Where exactly did you see the code? – Salman A Jun 05 '18 at 20:00
  • @SalmanA Yup. Moral of the story seems to be that it's just a little silly. I saw the code in an old code base filled with silly things... nothing particular about the use case, just a div within a div – Félix Paradis Jun 05 '18 at 20:01

0 Answers0