Warum nimmt die Mindesthöhe nicht zu, um zunehmenden Inhalt aufzunehmen?

Question

Ich dachte, die min-height Eigenschaft wird erweitert, wenn nötig, um ihren Inhalt aufzunehmen, aber ich war schockiert zu erkennen, dass es den Inhalt überhaupt nicht anzeigt, besonders wenn ich Größe. Einige Inhalte gehen komplett verloren. Dieser Code unten ist nicht der genaue Codegedanke, aber das ist das am nächsten zu meinem Problem, das ich bekommen kann.

<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

Das Problem: Sie können das Problem sehen, wenn der Inhalt innerhalb des .box erhöhen und die Größe des Browsers auf mobile Version verringert wird. Dann können Sie das wahre Problem sehen, dass der Inhalt aus der blauen Box kommt.

Sie können das Problem hier sehen: https://jsfiddle.net/bro49tg7/3/ Größe der Breite der Ausgabe zu kleineren Bildschirm.

Zur Lösung dieses Problems

Ihren CSS-Code zu dieser Änderung:

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

Answer 2

Genau wie Hunzaboy sagt, müssen Sie einen min-height auf jedem für dieses Feld zu arbeiten. Werfen Sie einen Blick auf diese Geige:

https://jsfiddle.net/6zpek8m6/

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