首先我要实现的布局很简单，就是在父容器wrap里面放两个子元素left和right，left定宽200px，right的宽度让它自适应，如下图：
image.png
正常来说我们用flex布局很容易实现这个布局效果，代码如下：
css代码
.wrap{
width:600px;
height:500px;
margin:0 auto;
background: #ccc;
display: flex;
}
.wrap .left{
width:200px;
height:400px;
background:green;
color:#fff;
font-size: 30px;
text-align: center;
}
.wrap .right{
flex:1;
height:400px;
background:pink;
color:#fff;
font-size: 30px;
text-align: center;
}
html代码
<body>
<div class="wrap">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
但是上面的代码会有一些问题，如果right中的文字太多或者font-size值设置过大，都会出现右侧right元素超出父元素，并且左侧left的定宽度会被压缩。如下图
1.font-size设置过大
image.png
2.font-size正常，但内容过多
image.png
出现以上问题的原因不明，但是解决方案也很简单，在自适应的元素right上加上overflow: hidden就可以了
.wrap{
width:600px;
height:500px;
margin:0 auto;
background: #ccc;
display: flex;
}
.wrap .left{
width:200px;
height:400px;
background:green;
color:#fff;
font-size: 30px;
text-align: center;
}
.wrap .right{
flex:1;
height:400px;
background:pink;
color:#fff;
font-size: 30px;
text-align: center;
overflow: hidden; //新添加的代码
}
image.png
网友评论