横向超出滚动如何设置样式

基础知识点

一般情况下，y方向的内容只要超出高度，都会有y向滚动条。

而横向滚动条，在内容超出宽度时，是向y的方向延伸，而无法在单行实现延伸，这个时候如果想根据子内容的宽度延伸而出现横向滚动条该怎么办呢？

这个时候，就需要用到 width:max-content ，其展示效果就是让所有的内容展示在同一行，绝不换行。就类似于，所有的内容当行放不下，就会无限制的y方向延伸一样。

还有那些值呢？

其中auto ,hidden ,属于大家常见的，一个是自动超出滚动，一个是超出不可见 。

还有一个是min-content ,取的是最小宽度值（如果没有时，就是宽度值）最大的那个元素作为整体容器的宽度。这个值，能很好的解决一个容器中，我们无法判断哪个容器的值是最大时，展示最大元素宽度的问题。

fit-content 适合，多个子元素，需要实现根绝内容实现居中效果。

// 左边对齐
.wrapper{
  width:fit-content;
}
// 居中对齐
.wrapper{
  width:fit-content;
  margin:0 auto;
}

// 右边对齐
.wrapper{
  width:fit-content;
  margin-left:auto;
}