从来没使用过的max/mincontent

标题写的是从来没有使用过的width属性，有点标题党了。更加准确的是，在此之前我甚至从来都没有见过。

它们是max-content、min-content、fit-content。

要不是为了实现这个效果之前，搜索了一下这才知道，真是开了眼了，故写下这篇文章记录一下。

CSS是真的难, 虽然很久没有写过CSS了，但是感觉自己绝大多数时候还是没有啥问题的，一旦遇上了，一时感觉就很无解。

一、目标的效果

这是一个步骤图
步骤节点个数不确定
步骤节点超过当前容器不换行
出现滚动条
最外面的容器宽度继承父级百分百，宽度不固定
节点外层有背景颜色

其余的需求不重要。

二、实现代码

2.1 触发BFC解决问题

html部分：

一开始想的是在box上面直接使用flex,然后让wrap可滑动就行了, container模拟容器宽度。就有了如下的css：

.container {
  width: 300px;
}

.wrap {
  overflow-x: scroll;
  overflow-y: hidden;
}

.box {
  padding: 24px;
  display: flex;
  align-items: center;
}

.item {
  width: 100px;
  height: 60px;
  background: salmon;
  margin-right: 12px;
}
复制代码

结果如下：

由于flex的属性的原因，item的挤在一行，width被重新计算了。那么我给box添加上width: 100%呢？会有如下的结果：

哦？宽度还是被压缩了。看来width和flex有点不对付啊。去翻阅一下妧一峰老师的Flex布局教程，发现了一个属性flex-shrink.

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 --- 出自阮一峰《Flex布局教程》

所以给item添加上flex-shrink: 0之后，效果果然没问题了。

item的宽度没问题了，也可以滑动了。再给item的父级添加一下背景颜色，哦豁，问题来了，iterm的父级没有跟着扩宽。

它超出最外层容器宽度之后，就断了。。。。也就是说item的宽度并没有把父级给撑起来。那给box添加一个overflow: auto，让它触发了[[BFC]]。

子元素已经能够撑起父元素的宽度了，但是就和图片一样，它又带来了新的问题。多了一个滚动条。那还得把wrap上面的 overflow-x: scroll给删除掉，完美了。这时候的代码片段如下：

.wrap {
  overflow-x: scroll;
  overflow-y: hidden;
  border: 1px solid rebeccapurple;
}

.box {
  padding: 24px;
  display: flex;
  align-items: center;
  background-color: gainsboro;
  overflow: auto;

}

.item {
  flex-shrink: 0;
  width: 100px;
  height: 60px;
  background: salmon;
  margin-right: 12px;
}
复制代码

触发[[BFC]]来解决问题总感觉非常的hack，它不符合逻辑。为什么再有了flex属性之后，子元素就撑不起父元素的宽度了呢？width是不是有其他属性可以解决这个问题呢？

所以我打开了MDN的width部分。

width: max-content

果然，看到了这样的属性：

width的默认值是auto。给box添加上max-content、min-content、fit-content任何一个属性值都可以实现需求。而且不需要修改wrap上面的overflow-x, 更加的符合直觉。子元素就应该乘宽父元素，然后父元素触发容器overflow-x: scroll的效果。

css如下：

.wrap {
  overflow-x: scroll;
  overflow-y: hidden;
  border: 1px solid rebeccapurple;
}
.box {
  padding: 24px;
  display: flex;
  align-items: center;
  /* width: 100%; */

  /* width: max-content; */

  /* width: min-content; */

  width: fit-content;
  background-color: gainsboro;

}

.item {
  width: 100px;
  height: 60px;
  background: salmon;
  margin-right: 12px;
}
复制代码