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

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>

`min-width` is the minimum width the element. It can be larger than the specified value if needed. — Raptor, Jan 24 '19 at 03:32

Michael Benjamin · Accepted Answer · 2019-01-24T11:24:16.193

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>

score 0 · Answer 2 · answered Jan 24 '19 at 03:34

0

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.

answered Jan 24 '19 at 03:34

Aakash Gandhi

55
5

Thank you for your reply, I update my question, because I still confused about `min-height`, if I change the `.box` display to `inline-block`, I don't need to use `min-width` instead of `width` – Chunbin Li Jan 24 '19 at 05:12
@ChunbinLi, when you set display to inline-block, your width is not respected. so It defaults to your actual image size. Have a look into this link for more information https://stackoverflow.com/questions/41800125/why-does-inline-block-automatically-adjust-its-width-according-to-its-childs-w – Aakash Gandhi Jan 24 '19 at 07:31

Fzstyle · Answer 3 · 2019-01-24T06:57:58.123

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.

Thank you for your reply, I update my question, because I still confused about `min-height`, if I change the `.box` display to `inline-block`, I don't need to use `min-width` instead of `width` — Chunbin Li, Jan 24 '19 at 05:12
@ChunbinLi You can check : https://stackoverflow.com/questions/47439665/why-do-display-block-and-display-flex-render-the-same-element-with-a-different hope this will help your more. — Fzstyle, Jan 24 '19 at 06:55

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

3 Answers3

min-width

width

display: inline-flex (and flex)

display: inline-block (and block)

revised code

`min-width`

`width`

`display: inline-flex` (and `flex`)

`display: inline-block` (and `block`)