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