1つのdivの高さは内容に依存しますdivの高さは残ります

Question

私はコンテナの高さを100％持っています。幅の2つのdiv：100％ divの高さをコンテンツに依存させたい増減します。低いdivは残りの高さをとります。

div { 
 
    width: 50%; 
 
    height:100%; 
 
} 
 
#p1 { 
 
    border:1px solid red; 
 
} 
 
#p2 { 
 
    border:1px solid blue; 
 
}

<div> 
 
    <div id="p1">item1</div> 
 
    <div id="p2">item2</div> 
 
</div>

Answer 1

あなたはCSSのフレキシボックスを使用することができます。親コンテナにフレックスコンテナを作成し、フレックスプロパティを適用します。 2番目の子要素を#p2 { flex: 1 }にします。それは自動的に残りのスペースを占有します。

.flex-container { 
 
    display: flex; 
 
    width: 100%; 
 
    height: 100vh; 
 
    flex-direction: column; 
 
} 
 

 
#p1 { 
 
    border:1px solid red; 
 
} 
 
#p2 { 
 
    border:1px solid blue; 
 
    flex: 1; 
 
} 
 

 
body { 
 
    margin: 0; 
 
}

<div class="flex-container"> 
 
    <div id="p1">item1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt expedita dolorum obcaecati animi voluptatem doloribus natus iusto quae assumenda molestiae? Cum dolorem repellat vero rem porro eos magnam, vel iure!</div> 
 
    <div id="p2">item2</div> 
 
</div>

・ホープ、このことができます：

は、以下のスニペットを見てください！