html - 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 个 child 中，只有 .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