柔性容器100％高度的错误？

Question

请参阅jsbin。 enter link description here

我有一些错误，在flex容器上有100％的高度。当太多的内容，它从容器

Answer 1

你忘了创建/打开下降

<div class="col col2"> 

后

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

也与该更换你的CSS代码：

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