アイテムにdisplay：flex appliedが指定されていない限り、フレックスアイテムは固定位置のフレックスコンテナ内で最大高さになるのはなぜですか？

Question

私は次のようなマークアップを持っている：私は赤の身長の100％を取るために黄色得ることができません

<div id="red"> 
    <div id="yellow"> 
     alot of text 
    </div> 
</div> 
<div id="blue"> 
</div> 

、それが唯一の赤が溢れていても、ウィンドウの100％をとります。黄色の要素が実際にあなたの赤の要素の100％を取り、私はblockに赤のdisplayを設定した場合、それは動作しますが、私はフレックス必要があります...

#red { 
    position: fixed; 
    height: 100%; 
    overflow-y: scroll; 
    width: 100px; 
    background-color: red; 
    display: flex; 
    flex-direction: column; 
    align-items: stretch; 
    align-content: stretch; 
} 

#yellow { 
    display: flex; 
    flex-grow: 1; 
    background-color: yellow; 
} 

#blue { 
    background-color: blue; 
} 

Answer 1

赤ではなく黄色にオーバーフローを適用してみませんか？

#red { 
 
    position: fixed; 
 
    height: 100vh; 
 
    width: 100px; 
 
    background-color: red; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
#yellow { 
 
    display: flex; 
 
    overflow-y: scroll; 
 
    background-color: yellow; 
 
} 
 

 
#blue { 
 
    background-color: blue; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<div id="red"> 
 
    <div id="yellow"> 
 
    Cras gravida, diam non adipiscing cursus, sapien urna adipiscing enim, at faucibus nunc felis at turpis. Aliquam erat volutpat. Nulla facilisi. Aenean nec nisi gravida ante convallis euismod sed quis odio. Sed nulla est, fringilla vel rhoncus vel, fermentum 
 
    et turpis. Curabitur eu posuere tortor. Integer sit amet nisl elit, gravida rutrum ipsum. Cras nisl est, sodales quis faucibus nec, tempus vel libero. Aliquam lobortis gravida erat, in placerat libero ultricies in. Curabitur volutpat lorem ut ligula 
 
    aliquet a fermentum augue porttitor. Vestibulum varius, purus id sollicitudin tincidunt, velit felis tincidunt erat, ut feugiat augue diam commodo lorem. Donec in augue non est tincidunt consequat. Mauris nec justo eget augue varius pulvinar id ut 
 
    risus. Donec fringilla, enim vitae tincidunt accumsan, urna elit laoreet tellus, ac gravida dolor dolor ac quam. Vestibulum dignissim felis quis tortor sollicitudin ut placerat mi adipiscing. 
 
    </div> 
 
</div> 
 
<div id="blue"></div>

ここではいくつかの光を当てることリンクです：

• Make child element use 100% of total OVERFLOW height of parent

Answer 2

。溢れているテキストでは、エレメントのサイズが変更されません。 height: 100%を#redから削除し、代わりにmin-height: 100%を使用してください。