Flexbox适用于容器内的所有元素的问题

Question

我正在关注这个教程，但他提供的CSS对我来说有点不同，我不知道为什么。带有四个图标的最后一部分显示不正确，我无法弄清楚原因。

.app-wrap {
  display: flex;
  flex-direction: column;
}
/*this grabs all the children, which will be the flex items*/
.app-wrap>* {
  flex: 1 1 auto;
}
/*Header*/
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/*Content*/
.content {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
/*Icon Bar*/
.icon-bar {
  display: flex;
}
.icon-bar a {
  flex: 1;
}

<div class="app-wrap">
  <header class="app-header">
    <a href="#" class="button">
      <i class="fa fa-arrow-left"></i> Back
    </a>
    <h1>FlexBox App Layout</h1>
    <a href="#" class="button">
      <i class="fa fa-cog"></i>
    </a>
  </header>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, beatae?</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque deserunt quisquam repellendus quia autem saepe culpa fugit nulla distinctio hic, beatae cum, perspiciatis iusto natus nesciunt itaque quaerat, earum ex.</p>
    <img src="https://pbs.twimg.com/profile_images/623184294521929728/LUJ4qL8n.jpg"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam quo ipsa excepturi sunt, quibusdam, quos!
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi natus dolores placeat esse ratione fugiat voluptatum impedit blanditiis consequuntur quos debitis consequatur ea beatae fuga perspiciatis vero, mollitia, molestias omnis. Dolorum quas
      iusto, molestiae ut at architecto dolorem nulla est!</p>
    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>
    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea, mollitia sequi quo consequatur dolor itaque numquam, aut tempore suscipit, ut quaerat. qui!</p>
  </div>
  <div class="icon-bar">
    <a href="#">
      <i class="fa fa-home"></i> Home
    </a>
    <a href="#">
      <i class="fa fa-bell"></i> Notifications
    </a>
    <a href="#">
      <i class="fa fa-envelope"></i> Messages
    </a>
    <a href="#">
      <i class="fa fa-user"></i> Me
    </a>
  </div>
</div>

Answer 1

当您使用Chrome时，作者可能正在使用Firefox。这是跨浏览器兼容性的问题，作者忽略了Chrome。无论如何，为了解决你的问题，请抓住这一部分：

.app-wrap > * {
  flex:1 1 auto;
}

在.app-wrap的3个孩子中，只有.content可以承受缩小的尺寸。其他2（.app-header和.icon-bar）无法收缩，因为其内容会被扭曲：

/*Header*/
.app-header {
  ...
  flex: 1 0 auto;
}

/*Content*/
.content {
  flex: 1 1 auto;
}

/*Icon Bar*/
.icon-bar {
  ...
  flex: 1 0 auto;
}

现在任何浏览器都应该采用相同的方式：https://codepen.io/anon/pen/jBagmJ