html - Flexbox 元素在屏幕变小的时候不缩小问题

2018-02-24T13:02:18Z||2018-02-24T13:02:18Z

原来以为把flex里的auto设置成0就好了，结果发现还是不行，google了下，原来要设置overflow为hidden才可以。

测试的页面：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Project</title>

  <style>
    .container {
      display: flex;
    }

    .child-auto {
      flex: 1 1 auto;
      overflow: hidden;
    }

    .child-zero {
      flex: 1 1 0;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="child-auto" style="background-color:yellow">1</div>
    <div class="child-auto" style="background-color:green">2</div>
    <div class="child-auto" style="background-color:red">33333333333333333333333333333333</div>
  </div>
  <div class="container">
    <div class="child-zero" style="background-color:yellow">1</div>
    <div class="child-zero" style="background-color:green">2</div>
    <div class="child-zero" style="background-color:red">33333333333333333333333333333333</div>
  </div>
</body>
</html>