オートは、2つのDIV

Question

親div間vertial空間を調整し、以下（ない横）最初div配置する必要がある第二divに充填されているどのくらいの内容に応じて、300pxの高さを固定しており、これは自動高さを調整する必要があると残りのスペースを埋める。

<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

はあなたがあなたの条件を達成するためにいくつかの余分な特性を持つdisplay: flexを使用することができ、この

.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

のようなものを探している願っています。

注：私はheight: 200pxと背景色をテスト目的のために設定しました。

.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>

いくつかの詳細についてjsFiddleをご覧ください。