在.text
中设置flex:1和width:0px时,我发现在iPhone5s的Safari中没有用。
但是当我设置width:1px很有用。
或者我设置遵循CSS代码也很有用
.box{
flex: 1;
display: flex;
width: 0px;
}
.sbox{
display: flex;
flex: 1;
width: 0px;
}
.text{
width: 0px;
flex: 1;
background-color: yellow;
}
我所有的代码是这些:
.out-box{
display: flex;
}
.box{
flex: 1;
display: flex;
}
.logo{
width: 40px;
height: 40px;
background-color: red;
flex-shrink: 0;
}
.sbox{
display: flex;
flex: 1;
}
.text{
width: 0px;
flex: 1;
background-color: yellow;
}
.other{
width: 10px;
height: 10px;
background-color: rosybrown;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex-test</title>
</head>
<body>
<div class="out-box">
<p>1</p>
<div class="box">
<div class="logo"></div>
<div class="sbox">
<select class="text">
<option value="1231231211111111111111111111111111112312312312312">12312312111111111111111111111111111123123123123121231231211111111111111111111111111112312312312312</option>
<option value="1231231211111111111111111111111111112312312312312">asdioahdahdihadhadhashdisa</option>
</select>
<div class="other"></div>
</div>
</div>
</div>
</body>
</html>