width值详解

遇到的问题

在做菜单组件时，遇到了问题，父容器宽度没有被子元素的内容撑开.

以下图的 html 结构说明：li 内容宽度很宽时，由于设置了white-space: nowrap，变成了禁止换行，由于禁止换行，导致宽度超出了蓝色的 div 的宽度，由于 li 宽度超出了蓝色 div 宽度，所以出现了横向滚动条，滚动条出来了，于是拖动滚动条，发现红框没有包住绿色的 li，即绿色 li 冲出了红色框的边界

出现问题的 html 结构

auto,100%,max-content,min-content,fit-content 有什么区别?

auto

auto 代表自身 contentWidth+paddingWidth+borderWidth+marginWidth=父 contentWidth，如果不显示指定 width，那元素的宽度就是auto。注意：display:block的元素width:auto的效果与width:100%的最终效果和特性是一致的

其中当自身 box-sizing:content-box（也是默认值）时，width 值为 contentWidth，当 box-sizing:border-box（IE 盒模型，IE8 及以下只支持 IE 盒模型）时，width 值为 contentWidth+paddingWidth+borderWidth。

100%

100%代表自身width = 父contentWidth * 100%

其中当自身 box-sizing:content-box（也是默认值）时，自身 Width 的含义为自身 contentWidth，当 box-sizing:border-box（IE 盒模型，IE8 及以下只支持 IE 盒模型）时，自身 Width 的含义为自身 contentWidth+paddingWidth+borderWidth。（在 IE8 及以下的浏览器中只支持 IE 盒模型，在 IE8+及其他主流浏览器中，通过 CSS 新增的 box-sizing 属性可以设置浏览器的盒模型。box-sizing 属性的默认值是 content-box，即 W3C 标准盒模型；而将 box-sizing 值设置为 border-box 时，则会更改为 IE 盒模型）

上面介绍的特性貌似可以解决大部分问题了，为啥还要介绍下面的? 因为多一套方案多一条路，同时上面的问题，通过下面的属性值解决起来更简单