前言

最难的果然还是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