在弹性布局中，一个 flex 子项的最终尺寸是基础尺寸（或内容尺寸）、弹性增长或收缩、最大最小尺寸共同作用的结果。
最终尺寸计算的优先级是：
最大最小尺寸限制 > 弹性增长或收缩 > 基础尺寸
- 基础尺寸由
flex-base属性或width属性，以及box-sizing盒模型共同决定； - 内容尺寸最指最大内容宽度，当没有设置基础尺寸是会顶替基础尺寸的角色；
- 弹性增长指的是
flex-grow属性，弹性收缩指的是flex-shrink属性； - 最大尺寸主要受
max-width属性限制；最小尺寸则比较复杂，受最小内容宽度、width属性和min-width属性共同影响。
问题复现
代码
<!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>
body {
margin: 0;
padding: 0;
}
.wrap {
width: 100vw;
height: 100vh;
display: flex;
}
.sidebar {
width: 200px;
height: 100%;
background: #dcffea;
flex: none;
}
.container {
width: 100%;
height: 100%;
background: #dedede;
flex: 1;
}
.text h2 {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
</head>
<body>
<div class="wrap">
<div class="sidebar"></div>
<div class="container">
<div class="text">
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
</body>
</html>
效果：
由上可以看出，父盒子被子元素撑开了，原因是：.text 的内容太多，致使 .container 容器被撑开了，并且 .container 的宽度变大使 .wrap 的宽度也增大了，并不是按照设想的 100vw。同时文本标题超出省略的样式也没有应用到。
解决：
容器使用 width:0;flex:1;;
原理：
因为设置了 flex-basis 属性的元素的最小尺寸是最小内容的宽度（文字内容在所有换行点换行后的尺寸），而我设置了标题不换行导致最小尺寸比较大，最终尺寸大于 flex:1 给到的 flex-basis:0%。(如果我们把标题设置会换行容器就不会被撑开了）。
具体解释为：
flex-basis属性下的最小尺寸是由内容决定的，而width属性下的最小尺寸是由width属性的计算值决定的。
这里出现的 “最小尺寸” 表示最终尺寸的最小值，所以在标题不换行的时候如果不设置 width 为 0 那么，flex 容器的宽度就会被内容撑开。当设置 width:0 之后，最小尺寸就为设置的 width 值了，就可以被 flex-grow:1 放大。
