フレックスコンテナの高さを2つの要素のうち小さい方に設定する

Question

これが重複して刻印される前に、私のような質問で見つかった有効な回答はありません。私は2つの要素を持つフレックスコンテナを持っている場合（私はそのリンクを見ることができると私は永遠に感謝するでしょうので、私は間違ってスタンプだ場合！）

---

は、デフォルトでは、コンテナは常にに高さがデフォルトになります2つのうち大きい方。フレックスコンテナの高さを2つの要素のうち小さい方に設定し、2つの要素のうち大きい方をオーバーフローさせたいと思います。フレックスコンテナの高さを、小さな要素の高さに合わせて設定するにはどうすればよいですか？

いくつかのコードを、誰もが、上記の説明のための基礎必要がある場合：

html

<div class="container"> 
    <div class="small"> 
    <div>This is less content</div> 
    <div>This is less content</div> 
    </div> 
    <div class="large"> 
    <div>random text</div> 
    <div>random text</div> 
    <div>random text</div> 
    <div>random text</div> 
    <div>random text</div> 
    <div>random text</div> 
    </div> 
</div> 

css

div.container { 
    display: flex; 
} 

div.small { 
    flex: 1; 
    background: red; 
} 

div.large { 
    flex: 1; 
    background: blue; 
    overflow: auto; 
} 

をここで一緒にプレイするcodepenです： https://codepen.io/andrewsunglaekim/pen/eWJEmM

Answer 1

大きな要素に対して絶対位置指定を使用できます。

div.container { 
 
    display: flex; 
 
    position: relative; 
 
    justify-content: flex-end; 
 
} 
 

 
div.small { 
 
    flex: 0 0 50%; 
 
    background: red; 
 
} 
 

 
div.large { 
 
    position: absolute; 
 
    top: 0; left: 0; bottom: 0; 
 
    right: 50%; 
 
    background: blue; 
 
    overflow: auto; 
 
}

<div class="container"> 
 
    
 
    <div class="large"> 
 
    <div>random text</div> 
 
    <div>random text</div> 
 
    <div>random text</div> 
 
    <div>random text</div> 
 
    <div>random text</div> 
 
    <div>random text</div> 
 
    </div> 
 

 
    <div class="small"> 
 
    <div>This is less content</div> 
 
    <div>This is less content</div> 
 
    </div> 
 
</div>