兄弟要素の寸法に基づいて要素の寸法を計算するにはどうすればよいですか？

Question

私は兄弟要素の高さに基づいて要素の高さを計算する方法を見つけようとしています。以下のコードスニペットでは、子供1と3は高さ20％、最大高さ70pxです。変数height: calc(100vh - 12vmin - 40px);であるコンテナのサイズにかかわらず、子2が高さの残りの部分を満たす方法を見つける必要があります。私はメディアクエリとcalc（）関数を試しましたが、可変コンテナの高さのためにどちらも動作しません。私はJSを使う必要があると思っていますが、それがないとどんな解決策が望ましいです。

ありがとうございました！

P.S.あなたがJSのソリューションをお持ちの場合は、vanilla JSを使用してください。

#container { 
 
    border: 4px solid #000000; 
 
    box-sizing: border-box; 
 
    height: calc(100vh - 12vmin - 40px); 
 
    max-width: 600px; 
 
    width: 100%; 
 
} 
 

 
#childOne { 
 
    border: 2px solid blue; 
 
    box-sizing: border-box; 
 
    height: 20%; 
 
    max-height: 70px; 
 
} 
 

 
#childTwo { 
 
    border: 2px solid red; 
 
    box-sizing: border-box; 
 
    height: 60%; 
 
} 
 

 
#childThree { 
 
    border: 2px solid yellow; 
 
    box-sizing: border-box; 
 
    height: 20%; 
 
    max-height: 70px; 
 
}

<div id="container"> 
 
    <div id="childOne"></div> 
 
    <div id="childTwo"></div> 
 
    <div id="childThree"></div> 
 
</div>

Answer 1

CSSのフレキシボックスを移動するための方法です。

容器の高さをheight: 100vhに変更し、display: flexとflex-direction: columnを追加します。

子供の場合は、高さの設定をすべて削除し、flex:1を追加します。

body { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
    #container { 
 
     border: 4px solid #000000; 
 
     box-sizing: border-box; 
 
     display: flex; 
 
     flex-direction: column; 
 
     height: 100vh; 
 
     max-width: 600px; 
 
     width: 100%; 
 
    } 
 

 
    #childOne { 
 
     border: 2px solid blue; 
 
     box-sizing: border-box; 
 
     height: 20%; 
 
     max-height: 70px; 
 
    } 
 

 
    #childTwo { 
 
     border: 2px solid red; 
 
     box-sizing: border-box; 
 
     flex: 1; 
 
    } 
 

 
    #childThree { 
 
     border: 2px solid yellow; 
 
     box-sizing: border-box; 
 
     height: 20%; 
 
     max-height: 70px; 
 
    }

<div id="container"> 
 
     <div id="childOne"></div> 
 
     <div id="childTwo"></div> 
 
     <div id="childThree"></div> 
 
    <div>