flex:1和width:0px在野生动物园中没有用

时间:2018-08-20 05:33:58

标签: css safari flexbox

.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>

.text { width:0px } in iPhone5s's Safari

.text { width:1px } in iPhone5s's Safari

0 个答案:

没有答案