问题现象不能自动横向滑动，overflow-x失效原因：flex-wrap:nowrap : 默认值，默认的子元素不会换行，如果装不下，会缩小子元素的大小，让它装下解决方法：子类设置 min-width: 18%; 最小宽度就可以了...
flex布局
有一个默认的规则就是当父元素宽度不够用时，自己调整自己所占的宽度比，这个flex-shrink设置为1时，表示所有子元素大家同时缩小来适应总宽度。当flex-shrink设置为0时，表示大家都不缩小适应。
<!DOCTYPE html>
<html lang="zh">
<meta charset="UTF-8">
<title>test</title>
<style type="text/css"
需求点：要求展示区域的盒子高度不能超出父盒子，超出部分滚动展示
问题
：页面布局使用的是
flex布局
，使用
overflow
：auto，当高度超出父盒子时，出现滚动条。可是视或不生效。
解决效果展示
代码如下：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"&
这里给父元素设置了宽度、flex，子元素也设置了宽度，这里是想让超出宽度出现滚动效果，就是因为加了flex，发现滚动
失效
了。解决办法如下：
给子元素加 flex-shrink: 0; 这样就可以了，让子元素不可被压缩。完美解决。
这是我在写移动端页面遇到的
问题
及解决方法，记录下来供以后开发时参考，相信对其他人也有用。
之前写移动端页面，有一个顶条是导航条，需要固定在页面顶部，并且里面的元素需要可以左右滚动。
但是当导航条设置fixed定位时，发现里面的子元素不能横向滚动。
position: fixed;
top: 0;
left: 0;
overflow
-x: auto;
最后通过加一个嵌套元素，给这个嵌套元...
有些小伙伴可能因为使用div而遇到了
overflow
-x
失效
的
问题
，这个
问题
很简单，在目标div外再套一层div即可。需要注意的操作如下：
1、目标div即子div，设置的
overflow
-y属性会管用。
2、父div，设置的
overflow
-x属性会管用。
3、子div的宽度要大于父div才会使得
overflow
-x属性管用（important）。...
使用
flex布局
时，有些需要滚动显示全部内容的元素在Firefox下却不能滚动，其原因在于
overflow
失效
。
解决方法：
给该元素添加min-height: 0或者min-width: 0，取决于你的滚动方向，如果无效，尝试给其父元素添加该style，以此类推。
