1、问题描述
在flex布局中，如果设置子元素的flex：1；内容不自动折行或者不允许换行，如果内容过宽，此时子元素会超出父元素，具体效果如下：
html
<div class="container">
<div class="left">
保哥学前端
</div>
<div class="right">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
css
.container {
background-color: red;
width: 300px;
display: flex;
align-items: flex-start;
min-height: 200px;
}
.left {
background-color: rosybrown;
flex-shrink: 0;
}
.right {
background-color: aqua;
flex: 1;
}
2、问题分析
flex:1 含义解释，flex-grow:1;flex-shink:1;flex-basic: auto; mdn定义
左侧元素样式flex-shrink: 0;所以宽度为实际的宽度。 右侧元素样式设置为flex:1;期望撑满剩余的元素，但是实际情况并不是这样，这是什么原因呢，经排查是因为子元素min-size-auto引起的，w3c定义：
- 如果允许内容滚动为0
- 如果内容不允许滚动内容为content-based mininum size
content-based mininum size定义如下：
content-based mininum size是specified size suggestion，transferred size suggestion ， content size suggestion 3个size其中之一，因未设置宽度信息，所为content size suggestion，根据定义为min-content size,所以右侧元素的实际宽度为内容的实际宽度
3、解决办法
依据content-based mininum size定义设置width,min-width即可
4、总结
flex为我们提供灵活的布局方式，但是最终都会转换为width，height等基础布局信息，因width，min-width的优先级导致上述问题的发生。
