% 100 yükseklikteki esnek kabı ile sorun mu yaşıyorsunuz?

Question

lütfen jsbin'e bakın. enter link description here

Esnek kabında% 100 yükseklikteki bazı hatalar var. Çok fazla içerik olduğunda

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

Ayrıca bu biriyle css kodunu değiştirmek

<div class="col col2"> 

sonra Bunu açık/oluşturmak için unutmuş

Answer 1

kaptan düşüyor:

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; 
}