html - Flexbox难以适应容器中的所有元素

我正在按照本教程进行操作，但是他提供的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>

最佳答案

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

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

.app-wrap的三个子项中，只有.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

关于html - Flexbox难以适应容器中的所有元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42863786/