开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第七天，点击查看活动详情
题引：
今天在做需求的时候，使用常用的左固宽+右flex：1的布局，但后面发现当你打开F12进行宽度变化时，右边的flex布局的内容被遮住了无法压缩显示，后面发现是需要通过min-width：0来搭配使用。下面开始讲解
正文：
首先我们需要先知道min-width的概念。
在MDN中：min-width 属性为给定元素设置最小宽度。它可以阻止 width 属性的应用值小于 min-width 的值。
min-width 的值会同时覆盖 max-width 和 width。
也就是说，min-width的权重是优先，而且在flex弹性布局中，min-width是默认值是auto（用于弹性元素的默认最小宽度。相比其他布局中以0为默认值，auto能为弹性布局指明更合理的默认表现）。
那么，当我们在flex布局中，当右边的宽度进行压缩超过已有容器高度时，min-width默认为auto，也就是内容所需要的宽度是多少它就是多少，那么弹性盒子自然被撑大了，也自然而然被覆盖了。
但是当我们重新给min-width:0时（或任何小于width的值），让width属性重新拿到元素宽度的控制权，因为width属性默认为内容区域的宽度，所以会自适应弹性盒子宽度，不会撑开容器。
高度也是同理，使用min-height:0解决
下面是一个例子
<!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;
width: 100vw;
height: 200px;
overflow: hidden;
}
.nav {
width: 100px;
height: 100%;
background-color: yellow;
}
.section {
flex: 1;
background-color: red;
}
.section;
</style>
</head>
<body>
<div class="container">
<div class="nav">
<div style="width: 100px">nav</div>
</div>
<div class="section">
<div>header</div>
<div style="overflow: auto">
<span>sectionsectionsectionsectionsectionsectionsection</span>
<span>sectionsectionsectionsectionsectionsectionsectionsectionsectionsectionsectionsectionsectionsection</span>
<span>sectionsectionsectionsectionsectionsectionsectionsectionsectionsectionsectionsectionsectionsection</span>
<span>sectionsectionsectionsectionsectionsectionsectionsectionsectionsectionsectionsectionsectionsection</span>
<span>sectionsectionsectionsectionsectionsectionsectionsectionsectionsectionsectionsectionsectionsection</span>
</div>
</div>
</div>
</body>
</html>
在这个例子中，也就是左固宽+右flex：1的布局，当我们进行宽度压缩的时候，我们会发现我们已经给了overfolw，但是不会出现滚动条且内容被覆盖的情况，我们打开F12定位到class="container"，会发现已有的宽度已经超过了容器跨度，这是因为min-width是auto，就会把内容区域所需要的宽度赋值给width。
那么我们给他修改成min-width:0，它就会把内容区域的可展示的宽度给width。
结尾：
以上就是flex布局时可能出现的问题，同理高度也可以这么处理。
