flex布局与min-width

我们常用flex来设置左侧固定宽度，右侧弹性宽度的布局。只要设置左侧固定宽度的flex-basis就没多大问题。但是最近在探索的一个布局是右侧固定，左侧不固定，而且弹性区域内部又有markdown转换的html，发现设置flex-basis和flex-shrink都没用，弹性盒子是父盒子的宽度，右侧固定的区域被挤出父盒子了都。很头疼。最后将min-width: 0加在左侧的弹性盒子上就OK了，但这是为啥？

情景再现

我们的场景是希望构建一个左侧为主要内容弹性撑开容器，右侧为一个固定宽度。

我们有html：

<div class="container">
    <div class="main">
        主要内容
    </div>
    <div class="right">
        右侧固定
    </div>
</div>

有我们的flex布局：

.container{
    display: flex;
    width: 1200px;
    margin: 0 auto;
    height: 300px;
    border: 2px solid #ccc;
}
.container p {
    width: 100%;
}
.container .main{
    border: 2px solid blue;
    width: 100%;
}
.container .right{
    width: 200px;
    flex-basis: 200px;
    flex-shrink: 0;
    border: 2px solid red;
}

ps：蛋疼的情景再现了下，发现破坏规则的是子元素里面的文本没换行导致宽度超宽，这时候将子元素设置overflow: hidden也可以解决问题了，anywhere，我们这里探索下min-width的妙用。

flex 中的 min-width

min-width是可以设置元素最小宽度的属性。虽然默认的min-width值为0，但是在flexbox的子元素中，min-width的值是auto。这会使块元素占用比预期更多的空间，甚至在小屏幕上会将容器拉伸到屏幕边缘之外。

min-width被定义为对抗width和max-width的属性，这意味着一旦元素宽度缩小到其隐式自动宽度一下，那么min-width:auto将启动并防止元素缩小。

修复的方式就是将元素的min-width设置为0即可。

也就是说，我们只需要将main设置为：

.container .main{
    min-width: 0;
    width: 100%;
}

尴尬的一批。

再复习下flex的相关属性：

flex-basis flex元素在主轴方向的初始大小。如果不使用box-sizing改变盒模型的话，那么这个属性就决定flex元素的内容盒的尺寸。
flex-grow flex项的增长系数，指定了flex容器中的剩余控件的多少应该分配给项目。
flex-shirnk 指定了flex元素的收缩规则。flex元素仅在默认宽度之和大于容器的时候才会发生收缩。其收缩的大小是依据flex-shrink的值。

由主要内容部分的字符不换行导致的一个乌龙，也算是学到了吧。😢