CSSフレックスボックスコンテナの行の高さを特定のコンテナの高さに設定する

Question

コンテナの1行のフレックスボックス実装で、特定のコンテナの高さに等しい全体の高さを持つことは可能ですか？私の現在の基本的なCSSの実装は次のとおりです。次のHTMLで

.flex-container { 
    display: flex; 
    flex-direction: row; 
    align-items: stretch; 
} 

：

<div class="flex-container"> 
    <div class="left-container"> 
    stuff 
    </div> 
    <div class="right-container"> 
    some other stuff 
    </div> 
</div> 

問題があり、.right-containerは本当に背の高い、高さが賢明得ることができます。だから私は.left-containerの高さになるように.flex-containerを拘束したいと思っています（それは私が前もって知らない）。このようにして、.right-containerはスクロールバーを持つことになります。

これはCSS経由でのみ可能ですか、それともJavascriptが必要ですか？役立つならば、必ずしもここでフレックスボックスを使う必要はありませんが、この高さの問題を除いて私のアプリケーションで使うのが最も便利だとわかりました。

Answer 1

3つの要素の高さを設定し、.left-containerのoverflow-yをscrollに設定した場合は、そのようにする必要があります。

.flex-container { 
 
     display: flex; 
 
     flex-direction: row; 
 
     align-items: stretch; 
 
     border: solid 1px grey; 
 
     padding: 5px; 
 
    height: 150px; 
 
    } 
 

 
    .left-container { 
 
     border: solid 1px red; 
 
     flex: 1; 
 
     height: 150px; 
 
    } 
 

 
    .right-container { 
 
     border: solid 1px blue; 
 
     flex: 3; 
 
     height: 150px; 
 
     overflow-y: scroll; 
 
    }

<div class="flex-container"> 
 
     <div class="left-container"> 
 
     stuff 
 
     </div> 
 
     <div class="right-container"> 
 
     some other stuff some other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuffsome other stuff 
 
     </div> 
 
    </div>

Answer 2

.flex-container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: stretch; 
 
    width:300px; 
 
    height:300px; 
 
    border:1px solid #000; 
 
} 
 

 
.left-container{ 
 
    background-color:red; 
 
    } 
 
.right-container{ 
 
    background-color:green; 
 
    }

<div class="flex-container"> 
 
    <div class="left-container"> 
 
    stuff 
 
    </div> 
 
    <div class="right-container"> 
 
    some other stuff 
 
    </div> 
 
</div>