浏览器“奇葩”兼容问题收集
flex布局如何保持内容不超出容器？
在日常开发中，我们可能会遇到一种情况：父元素设置固定的宽、高且设置display:flex，子元素设置了flex:(value)，但是内容却超出父元素显示了，即使给子元素设置overflow: hidden;也没有作用，如图1所示。
图1——子元素超出容器显示：
在图1中，红色框标记出来的是父元素实际的宽，但是子元素确在父元素之外显示了，解决的办法是给子元素添加width: 0;但是在火狐浏览器时又出问题了，为啥啊？？？其实我也不知道，所以为了兼容浏览器给子元素添加width: 0;min-width: 0;就可以解决了，不过这个办法也不一定适用于所有的情况，所以各位小主需要根据自己的实际情况去探索哦，加油、加油、加油。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父元素设置display:flex，宽、高被子元素撑大了</title>
<style type="text/css">
.container{
display: flex;
flex-direction: row;
align-items: center;
width: 500px;
height: 40px;
background-color: coral;
}
.left{
flex: 1;
background-color: antiquewhite;
}
.center{
flex: 3;
width: 0;
min-width: 0;
background-color: aquamarine;
}
button{
width: 100%;
}
span{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
.right{
flex: 2;
background-color: cadetblue;
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="container">
<div class="left">我是左边的</div>
<div class="center">
<button >
<span>我是中间的我是中间的我是中间的我是中间的我是中间的我是中间的我是中间的</span>
</button>
</div>
<input class="right" placeholder="" type="" name="" id="" value="我是右边的" />
</div>
</body>
</html>
上述代码的执行结果是：
5607
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
