爲什麼柔性物品可以在固定位置的柔性容器中取得完整的高度，除非該物品有顯示：應用了柔性？

Question

我有類似下面的標記：

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

我不能讓黃色帶紅色的身高100％，只需要在窗口的100％，即使紅色四溢。它的工作原理，如果我設置紅色的display到block，但我需要柔性...

#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

黃色的元素，其實需要你的紅色元素的100％。溢出的文本不會導致您的元素更改大小。您應該從#red中刪除height: 100%，並使用min-height: 100%代替。