css3中flex布局宽度不⽣效的解决
两列布局项⽬中经常会⽤到，很多种⽅法可以做这样的效果
但是最⽅便的还是要属flex了，给外层⽗元素设置display:flex；然后⼦元素，宽度⾃适应的那个设置
flex-grow:1;，另外⼀个设置固定宽度就可以做到，⼀个固定另⼀个⾃适应了。
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex 宽度不⽣效</title>
</head>
<body>
<style>
/* 重置样式 */
* {
margin: 0px;
padding: 0px;
}
/* 设置外层display为flex */
.
box {
display: flex;
height: 100px;
width: 100%;
}
/* 左边⾃适应 */
.box .left {
flex-grow: 1;
background: red;
}
/* 右边固定 */
.
box .right {
width: 200px;
background: yellow;
}
</style>
<!-- 外层盒⼦ -->
<div class="box">
<!-- 左侧 -->
<div class="left"></div>
<!-- 右侧 -->css布局左边固定右边自适应
<div class="right"></div>
</div>
</body>
</html>
这段代码的运⾏结果就是上⾯截图那样，但是这个代码有⼀个⼩⼩的bug，那就是当我们左边（⾃适应那边）内部如果有内容，并且内容的宽度超过了left的宽度的时候，就会把右边（固定宽度）挤⼩，你会发现你给的固定宽度（例⼦中的200px）不⽣效了，或者出现滚动条。
我们在左边加⼀点内容，并且让他超出宽度。
/* 超出的内容样式 */
.box .left .content {
width: 1000px;
}
<!-- 左侧 -->
<div class="left">
<!-- 超出的内容 -->
<div class="content"></div>
</div>
运⾏结果：
内容超出，并出现了滚动条。这个问题很好解决，只需要在left上⾯加上溢出隐藏的属性，就可以了。  /* 左边⾃适应 */
.box .left {
flex-grow: 1;
background: red;
overflow: hidden;
}
但是问题⼜来了，右边出来了，可是它的宽度变⼩了，不⾜200了。
这个问题呢，其实也很容易，给右边的div（right）加上min-width:200px；就完美了。
/* 右边固定 */
.box .right {
width: 200px;
min-width: 200px;
background: yellow;
}
这样不管你，什么屏幕，或者怎么拖放都能完美兼容了。。。
到此这篇关于css3中flex布局宽度不⽣效的解决的⽂章就介绍到这了，更多相关flex布局宽度不⽣效内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。