flex-grow布局子元素宽度过大撑开了父元素的解决方法,实现固定宽和自适应的布局
版权声明：
本文为博主原创文章，转载请声明原文链接...谢谢。o_0。
更新时间：
2019-05-12 16:51:46
温馨提示：
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
chrome内核兼容性
从我手边已有的版本测试结果兼容 Chrome/39.0.2171.95 - Chrome/74.0.3729.131
水平布局实现
重要的概念先说一下 flex-grow 该属性用来设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间
flex布局让前端布局又多啦一个方案,下面想实现这个后台常用的布局,左边一栏菜单300px 这样父元素还剩多少空间都让右边占用从来实现自动宽度,样式如下,是我们想要的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>flex布局测试</title>
<style type="text/css">
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.main {
height: 100%;
width: 50%;
margin: 0px auto;
display: flex;
}
.left,
.right {
height: 100%;
}
.left {
width: 300px;
background: #ededed;
}
.right {
flex-grow: 1;
background: #f00;
}
.text {
white-space: nowrap;
overflow: auto;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
300px
</div>
<div class="right"> 这些点位文字
<div class="text">一些元素</div>
下面一些文字</div>
</div>
</body>
</html>但是如果有些下面这样的布局,右边有一块代码块要宽度肯定是不固定的可能会非常宽,于是想让他过宽的话就把那一块出现滚动条也就是overflow：auto，但是布局不像预期中的那样，如下
从这里可以看出如果右边子元素的宽度大于父窗口的宽减去左边的300px时右边的父元素会被撑开挤占左边的宽度，下面有个解决方法,目录 谷歌74.0.3729.131 火狐66.0.3 ie11 edge测试通过，把右边元素的宽度设置为0如下;
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>flex布局测试</title>
<style type="text/css">
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.main {
height: 100%;
width: 50%;
margin: 0px auto;
display: flex;
}
.left,
.right {
height: 100%;
}
.left {
width: 300px;
background: #ededed;
}
.right {
flex-grow: 1;
width: 0px;
background: #f00;
}
.text {
white-space: nowrap;
overflow: auto;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
300px
</div>
<div class="right"> 这些点位文字
<div class="text">一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素一些元素</div>
下面一些文字</div>
</div>
</body>
</html>可以运行代码后把里面设置的width:0px去掉,查看上面出现的那种情况
对上面情况的理解
出现上面的情况可能是因为，要分配父元素的剩余空间首先得元素的宽度渲染出来然后计算有没有剩余的空间，而右边内容计算出来宽度已经把右边容器撑开啦所有子元素的和已经超过啦父元素的宽，如果把右边容器先设置为width:0px;计算的时候就只有左边的宽度啦,这样就可以重新分配宽度啦
