设置 width: auto 有什么不同吗？ 和宽度：适合内容；？

Question

From what I know, setting width: fit-content; to the element simply means that the element width will take up the available space but never less than the min-content within the element. But, isn't the default width: auto; behaves the same as well?

Just wondering when should I use width: fit-content;?

Answer 1

width: auto is the default width for all elements, so the width will rely on display types (block, inline, etc.) to show respectively.

To make you understand better about width:auto , I put 2 code snippets below

Case 1: Using div with display: block as default

 .container { border: 2px solid #ccc; padding: 10px; width: 20em; }.item { width: auto; background-color: lightblue; padding: 5px; margin-bottom: 1em; }

 <div class="container"> <div class="item">Item</div> <div class="item">Item with more text in it.</div> <div class="item">Item with more text in it, hopefully it's lengthy enough for the demo</div> </div>

Case 2: Using span with display: inline as default

 .container { border: 2px solid #ccc; padding: 10px; width: 20em; }.item { width: auto; background-color: lightblue; padding: 5px; margin-bottom: 1em; }

 <div class="container"> <span class="item">Item</span> <span class="item">Item with more text in it.</span> <span class="item">Item with more text in it, hopefully it's lengthy enough for the demo</span> </div>

So basically, display: block will take up the whole width for element display, and display: inline and display: inline-block will align with content width. The next question is why we don't use display: inline or display: inline-block instead of width: fit-content ?

Let's check the below code snippet for div with width: fit-content

 .container { border: 2px solid #ccc; padding: 10px; width: 20em; }.item { width: fit-content; background-color: lightblue; padding: 5px; margin-bottom: 1em; }

 <div class="container"> <div class="item">Item</div> <div class="item">Item with more text in it.</div> <div class="item">Item with more text in it, hopefully it's lengthy enough for the demo</div> </div>

You can see that each content line has been shown with an individual color box, and it does not consume other lines' space

As your question

Just wondering when should I use width: fit-content;?

In my personal experience, I've been usually using width: fit-content; when I want to show tags with fit borders

Source

All my tags can be shown in different lines but borders will be displayed respectively by content, so width: fit-content is a good choice for me.

P/s: Actually, we can achieve this design in other ways like using a wrapper, using flexbox, etc. But I personally like width: fit-content because it's simpler. One thing I'd like to note is that this approach does not work well with Inte.net Explorer (check browser compatibility here )