具有 100% 高度 flex 容器的錯誤？

Question

請參閱 jsbin。 在此處輸入鏈接描述

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