Flexbox-fitting容器內所有元素的問題

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可以提供具有收縮-ED大小。另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