コンテナ内のすべての要素をフレキシブルにフィットすることに問題があります

Question

私はこのチュートリアルに従っていますが、彼はレンダリングに多少異なるレンダリングを提供しています。 4つのアイコンが表示されている最後のセクションが正しく表示されず、理由を把握できません。

.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を使用して、おそらくでした。これは、クロールを見落としたブラウザ間の互換性に関する問題です。とにかく、あなたの問題を解決するために、この部分に傷を付け：.app-wrapの3人の子供のうち

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

、唯一.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