What's the difference between using width and min-width in flexbox? - html

Question

Background
I want to display the icon through background-image, but if the text is too long, it will be obscured by text.
.box {
display : inline-flex;
}
.box:before {
content : '';
background-image: url('https://imgur.com/TCc5A1P');
width: 60px;
height: 60px;
margin-right: 0.2em;
display: inline-block;
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure harum commodi totam sit, natus dolore reiciendis. Nihil possimus, magni praesentium molestias ab vel dolorum rem. Eos autem saepe magnam pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi
</div>
Question
When I use min-width instead of width or use inline-block for .box, it will work. Can anyone tell me why min-width or inline-block works?
use min-width instead of width
.box {
display : inline-flex;
}
.box:before {
content : '';
background-image: url('https://imgur.com/TCc5A1P');
min-width: 60px;
/* width: 60px; */
height: 60px;
margin-right: 0.2em;
display: inline-block;
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure harum commodi totam sit, natus dolore reiciendis. Nihil possimus, magni praesentium molestias ab vel dolorum rem. Eos autem saepe magnam pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi
</div>
--
use inline-block for .box
.box {
/* display : inline-flex; */
display : inline-block;
}
.box:before {
content : '';
background-image: url('https://imgur.com/TCc5A1P');
width: 60px;
height: 60px;
margin-right: 0.2em;
display: inline-block;
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure harum commodi totam sit, natus dolore reiciendis. Nihil possimus, magni praesentium molestias ab vel dolorum rem. Eos autem saepe magnam pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi
</div>

Answer 1

When I use min-width instead of width or use inline-block for .box, it will work. Can anyone tell me why min-width or inline-block works?
min-width
Sets the minimum width of an element.
width
Sets the width of an element.
display: inline-flex (and flex)
An initial setting on flex items is flex-shrink: 1. This means that flex items can shrink below their defined width / height to prevent their overflow of the container. In order to prevent this behavior, you need to disable flex-shrink.
For example:
.box::before {
width: 60px;
flex-shrink: 0; <------ add this to your code
content : '';
...
...
...
}
Or, for a cleaner version (which is also recommended by the flexbox spec), use this:
.box::before {
flex: 0 0 60px; /* flex-grow, flex-shrink, flex-basis */
content : '';
...
...
...
}
Note that flex-shrink applies to width and height, but not to min-width and min-height. By disabling flex-shrink on an element, you are effectively establishing its minimum length.
For example:
width: 60px;
flex-shrink: 0;
is equivalent to:
min-width: 60px;
For a more complete explanation, see "The flex-shrink factor" section in my answer here:
What are the differences between flex-basis and width?
display: inline-block (and block)
flex-shrink (described above) does not apply in a block formatting content.
revised code
.box {
display: inline-flex;
}
.box::before {
flex: 0 0 60px;
height: 60px;
background-image: url('http://i.imgur.com/60PVLis.png');
background-size: contain;
background-repeat: no-repeat;
margin-right: 0.2em;
content: '';
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure harum
commodi totam sit, natus dolore reiciendis. Nihil possimus, magni
praesentium molestias ab vel dolorum rem. Eos autem saepe magnam
pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Quasi
</div>

Answer 2

Width Property will change the horizontal image dimensions to the pixels you have defined (In your case 60px). Width = 60px
Min-Width will make sure that horizontal image width is greater that or equal to the pixel you have defined. Width >= 60px.
The ouput that you see in your case is because the image is taking its original dimensions. ie some value greater tha 60px.

Answer 3

width:
The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.
min-width:
The min-width CSS property is used to set the minimum width of a given element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.
max-width:
The max-width CSS property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.
Please visit Info Source for more info.
Edited
this also apply with height,
to make it simpler and more general
something = 10px;
the value is neither less nor more then 10px.
min-something = 10px;
the minimum value can't below the given property value.
E.g.= 10px, 11px, 20px, 300px is above minimum level so it is accepted. So the image cant be lower then 10px in resolution.
max-something = 10px;
the maximum value can't exceed or above the given property value.
E.g.= 9px, 8px, 5px, 0px is below maximum level so it is accepted. So the image cant be higher then 10px in resolution.
Below is few example
min width and height is 100px
.box {
/*display : inline-flex;*/
display: inline-block;
}
.box:before {
content: '';
background-image: url('https://smartlogic.io/images/brand-assets/smartlogic-seal-teal-100.png');
min-width: 100px;
min-height: 100px;
margin-right: 0.2em;
display: inline-block;
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure harum commodi totam sit, natus dolore reiciendis. Nihil possimus, magni praesentium molestias ab vel dolorum rem. Eos autem saepe magnam pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Quasi
<br> please note that image is 100px *100px
</div>
min width and height is 60px
.box {
/*display : inline-flex;*/
display: inline-block;
}
.box:before {
content: '';
background-image: url('https://smartlogic.io/images/brand-assets/smartlogic-seal-teal-100.png');
min-width: 60px;
min-height: 60px;
margin-right: 0.2em;
display: inline-block;
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure harum commodi totam sit, natus dolore reiciendis. Nihil possimus, magni praesentium molestias ab vel dolorum rem. Eos autem saepe magnam pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Quasi
<br> please note that image is 100px * 100px
</div>
width and height is 60px
.box {
/*display : inline-flex;*/
display: inline-block;
}
.box:before {
content: '';
background-image: url('https://smartlogic.io/images/brand-assets/smartlogic-seal-teal-100.png');
width: 60px;
height: 60px;
margin-right: 0.2em;
display: inline-block;
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure harum commodi totam sit, natus dolore reiciendis. Nihil possimus, magni praesentium molestias ab vel dolorum rem. Eos autem saepe magnam pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Quasi
<br> please note that image is 100px * 100px
</div>
width and height is 100px
.box {
/*display : inline-flex;*/
display: inline-block;
}
.box:before {
content: '';
background-image: url('https://smartlogic.io/images/brand-assets/smartlogic-seal-teal-100.png');
width: 100px;
height: 100px;
margin-right: 0.2em;
display: inline-block;
}
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure harum commodi totam sit, natus dolore reiciendis. Nihil possimus, magni praesentium molestias ab vel dolorum rem. Eos autem saepe magnam pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Quasi
<br> please note that image is 100px * 100px
</div>
Also note that
in your case,
when you use max-width you need to define the min-width as well.
min-width will give you the space form image to show.