爲什麼最小高度不增加，以適應不斷增加的內容

Question

我想設置min-height財產如有必要將擴大，以適應其內容，但我很震驚地意識到，它不顯示內容可言，尤其是當我重新尺寸。有些內容從顯示中完全丟失。下面的代碼並不是想法的確切代碼，但這是我能得到的最接近我的問題。

<div class="parent"> 
     <div class="box"> Box One</div> 
     <div class="box"> Box two</div> 
     <div class="box"> Box three</div> 
     <div class="box"> Box four</div> 
     <div class="box"> Box five</div> 
     <div class="box"> Box six</div> 
    </div> 

    <style> 
     .parent { 
       min-height: 300px; 
       width: 100%; 
       background-color: blue; 
      } 
     .box { 
       width: 50%; 
       height: 50px; 
       color white; 
      } 
    </style> 

Answer 1

問題：你可以看到這個問題時，.box的增加和瀏覽器的大小，裏面的含量降低到移動版本。然後，您可以看到真正的問題，即內容正在脫離藍框。

您可以在這裏看到問題：https://jsfiddle.net/bro49tg7/3/將輸出的寬度調整爲較小的屏幕。

爲了解決這個問題

改變你的CSS代碼到這一點：

.box{ 
width: 50%; 
min-height: 50px; /* changed this */ 
color: #fff; 
} 

Answer 2

正是因爲Hunzaboy說，你需要在每個框最小高度爲這個工作。看看這個小提琴：

https://jsfiddle.net/6zpek8m6/

.parent { 
    min-height: 300px; 
} 
.box { 
    min-height: 50px; 
}