Käfer mit 100% Höhe des Flexbehälters?

Question

siehe bitte jsbin. enter link description here

Ich habe einen Fehler mit 100% Höhe auf Flex-Container. wenn auch mehr Inhalt ist, fällt sie aus dem Behälter

Answer 1

Sie vergessen haben/offen zu schaffen

<div class="col col2"> 

nach

<div class="col col1"> 
</div> place <div class="col col2"> after the ending div of col col1 

auch Ihre CSS-Code mit diesem ersetzen:

html,body{ 
    height:100%; /*Having 100% stretches your content, try removing height:100%; and see the difference*/ 
} 

.parent{ 
    padding:10px; 
    background:#888; 
    display:flex; 
    flex-wrap:wrap; /*Using flex-wrap:wrap will wrap your second div class to the next line*/ 
    flex:1 0 auto; 
} 

.col1{ 
    background:yellow; 
} 

.col2{ 
    background:lightgreen; 
}