前言

最难的果然还是css，工作中经常使用display:flex;让多个竖直排列的元素变成横向排列，直到今天才发现display:flex;会导致子标签的宽度失效。

正文

问题

<div class="outer"><div class="inner">1</div><div class="inner">2</div><div class="inner">3</div></div>.outer {width: 300px;border: 1px solid black;overflow-x: auto;display: flex;.inner {width: 200px;height: 20px;background: pink;margin-right: 10px;}}

按理说，父元素应该会出现横向滚动条，但实际结果如下：

原因

百度查了一下，原因如下：

父元素设置了display:flex,那么所有的子标签都会默认加上flex:0 1 auto;其中1 就是 flex中的 flex-shrink 属性,表示开启了元素的收缩功能，所以子元素宽度才会失效。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

flex的默认值就是0 1 auto

解决

方法1

flex: 0 0 auto;width: 200px;

方法2

flex: 0 0 200px;

方法3

flex-shrink: 0;width: 200px;

方法4

min-width:200px;

效果

推荐使用方法3