अतिप्रवाह के बावजूद मेरा फ्लेक्सबॉक्स क्यों विस्तारित होता है: छुपा/ऑटो?

Question

क्या कोई इस व्यवहार को समझा सकता है? मैंने दो क्षैतिज-स्टैक्ड फ्लेक्सबॉक्स बनाए हैं जिन्हें मैं एक पूर्ण-स्क्रीन वेब ऐप के लिए एक सरल रूपरेखा बनाना चाहता हूं। हालांकि, मेरे शीर्ष फ्लेक्सबॉक्स के अंदर सामग्री जोड़ने से यह विस्तार होता है, अंततः स्क्रीन के नीचे एक को दबाकर।

var buttonEl = document.getElementById('addButton'); 
 

 
buttonEl.addEventListener('click', function() { 
 
    var newEl, 
 
     ulEl; 
 
    
 
    // Create a list item element 
 
    newEl = document.createElement('li'); 
 
    newEl.innerHTML = "Test List Item"; 
 
    
 
    // Add the list item element to the list 
 
    ulEl = document.getElementById('list'); 
 
    ulEl.appendChild(newEl); 
 
}, false);

* { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    overflow: hidden; 
 
} 
 
html { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: lightblue; 
 
} 
 
#top { 
 
    flex-grow: 1; 
 
    overflow-y: auto; 
 
} 
 
#bottom { 
 
    flex-basis: 1em; 
 
} 
 
li { 
 
    width: 100%; 
 
    height: 2em; 
 
    line-height: 2em; 
 
    background: white; 
 
}

<div id="top"> 
 
    <button id="addButton">add list item</button> 
 
    <ul id="list"> 
 
    </ul> 
 
</div> 
 
<div id="bottom"> 
 
    Bottom 
 
</div>

Answer 1

द्वारा ओवरराइट किया जाएगा, यह करने का एक तरीका यहां है: http://jsfiddle.net/1ejgybmv/।

* { 
    padding: 0px; 
    margin: 0px; 
} 

html, body { 
    height: 100%; 
} 

body { 
    display: flex; 
    flex-direction: column; 
    background: lightblue; 
} 
#top { 
    flex: 1 1 auto; 
    overflow-y: auto; 
} 

#bottom { 
    flex: 0 0 1em; 
} 

li { 
    height: 2em; 
    line-height: 2em; 
    background: white; 
} 

Answer 2

बहुत आसान। प्रभावी ढंग से है कि संपत्ति आप पहली बार में परिभाषित "की हत्या"

#top { 
    flex-grow: 1; 
    overflow-y: auto; 
} 

: आप overflow:hidden साथ सभी तत्वों को शीर्ष

* { 
    padding: 0px; 
    margin: 0px; 
    overflow: hidden; 
} 

में तो फिर तुम इस के साथ #top div के लिए संपत्ति के ऊपर लिख तय कर रहे हैं। बस उस overflow-y से छुटकारा पाएं या overflow-y:hidden को परिभाषित करें और यह काम करेगा। याद रखें कि सीएसएस में परिभाषाओं का क्रम बहुत महत्वपूर्ण है, इसलिए एक परिभाषा के बाद जो कुछ भी आप जोड़ते हैं, उसे नई परिभाषा