先来一段简单的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
display: flex;
margin-bottom: 20px;
}
.left {
width: 50px;
background-color: #f00;
}
.right {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="left">50</div>
<div class="right">Last</div>
</div>
<div class="container">
<div class="left">50</div>
<div class="right">
<label>这是一段很长很长的话，这是一段很长很长的话，这是一段很长很长的话，这是一段很长很长的话</label>
<label>这是一段很长很长的话，这是一段很长很长的话，这是一段很长很长的话，这是一段很长很长的话</label>
<label>这是一段很长很长的话，这是一段很长很长的话，这是一段很长很长的话，这是一段很长很长的话</label>
</div>
</div>
</div>
</body>
</html>
随便建个HTML文件复制这段话，你就可以看到如下图像
可以看到，第二个50，已经被挤占了空间，不足50px的宽度了。
这是怎么回事呢？width属性不起作用了吗？
原来是flex在搞鬼。
来看一个属性：flex-shrink。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
这就懂了，原来是这个属性导致了flex item都是默认可以被缩小，被挤占空间的。
所以，在固定宽度的item里，都需要加上这个属性 flex-shrink: 0。
所以，敲重点，下次面试再遇到让我们写双列布局或者三列布局的时候，固定宽度那个item千万别忘了加上这个属性，面试官看到了问起你（没看到就自己说出来），同样都是flex布局，你懂这么深，这不就是加分小技巧嘛。
