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>

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>