Merging width and flex properties for utility classes - html

Question

On my site, I have a lot of utility classes that sets the width of elements. For almost all of the cases, the width property is perfect. The only issue is with flex box. For flex items, the width property does not set the width, and instead the flex property needs to be used. I tried combining the two into a single class like so:
.width-100 {
width: 100px !important;
flex: 0 0 100px !important;
}
Surprisingly enough, this worked on the few places I tried it. When an element is not using flexbox, its width gets set properly. When an element is using flexbox, the flex property makes sure it works as well. However, I am wondering if this is a good idea or not. Could there be possible bugs that I am simply not foreseeing right now?

Answer 1

You may fall into the case where you have min-width constraint and setting the width will make the flex item behave differently:
Here is a basic example:
.container {
display:flex;
margin:5px;
}
.container > img {
flex: 0 0 100px;
}
.container > span {
flex-grow:1;
background:red;
}
<div class="container">
<img src="https://i.picsum.photos/id/100/200/100.jpg">
<span></span>
</div>
<div class="container">
<img src="https://i.picsum.photos/id/100/200/100.jpg" style="width:100px">
<span></span>
</div>
In the first case the min-width constraint of the image will force it to have a width equal to 200px whereas in the second case you will have 100px. So it's wrong to assume that width isn't working in flexbox and you need flex-basis.Your code will indeed force the width to always be 100px but it's not the same as flex:0 0 100px when dealing with flex items:
By the way, your code can be simplified to only
.width-100 {
width: 100px !important;
flex-shrink: 0 !important;
}
This should produce the same output because flex-grow is by default 0 and flex-basis will consider the width you set.