Auto einstellen vertial Raum zwischen zwei DIVs

Question

Elternteil div hat Höhe 300px fixiert, je nachdem, wie viel Inhalt in der zweiten div gefüllt ist, das unten gelegt werden müssen (nicht neben) die erste div und dies muss Auto Höhe einstellen und füllt den verbleibenden Speicherplatz.

<div class="parent"> 
    <div class="child-one"> 
     Auto adjust the space of this div depending upon "child-two" div height 
    </div> 
    <div class="child-two"> 
     Height of this div will depend upon the data filled. 
    </div> 
</div> 

Answer 1

Hoffnung mögen Sie diese etwas suchen

.parent{ 
 
    height: 200px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    border: 1px solid blue; 
 
} 
 
.child-one{ 
 
    flex: 1; 
 
    display: flex; 
 
    align-items: center; 
 
    background: blue; 
 
} 
 
.child-two{ 
 
    background: red; 
 
} 
 
.parent div{ 
 
    padding: 5px 10px; 
 
}

<div class="parent"> 
 
    <div class="child-one"> 
 
     Auto adjust the space of this div depending upon "child-two" div heightLorem ipsum dolor sit amet, quas doming inermis at per, discere mediocrem omittantur ei vis, graeci moderatius at qui. Praesent convenire eloquentiam nec te 
 
    </div> 
 
    <div class="child-two"> 
 
     Height of this div will depend upon the data filled.Lorem ipsum dolor sit amet, quas doming inermis at per, discere mediocrem omittantur ei vis, graeci moderatius at qui. Praesent convenire eloquentiam nec te 
 
    </div> 
 
</div>

Answer 2

Sie display: flex mit einigen zusätzlichen Eigenschaften verwenden können, um Ihre Anforderung zu erreichen.

Hinweis: Ich setze height: 200px und Hintergrundfarben nur für Testzwecke.

.parent { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: flex-end; 
 
    
 
    height: 200px; 
 

 
    background-color: red; 
 
} 
 

 
.child-one { 
 
    height: 100%; 
 

 
    background-color: green; 
 
} 
 

 
.child-two { 
 
    background-color: blue; 
 
}

<div class="parent"> 
 
    <div class="child-one"> 
 
     Auto adjust the space of this div depending upon "child-two" div height 
 
    </div> 
 
    <div class="child-two"> 
 
     Height of this div will depend upon the data filled. <br /> 
 
     Some text. 
 
    </div> 
 
</div>

Schauen Sie bitte auf der jsFiddle für einige Details.